From 70a81bfafbe0dff74b4a6c5053b9842d86d43dea Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@jkrb.io>
Date: Sat, 4 Jan 2025 10:57:51 +0700
Subject: [PATCH] feat(refactor): Initialise `ui-overlay` package, restructure
 components (#2409)

---
 package.json                                  |   3 +
 packages/app/package.json                     |   4 +-
 packages/app/src/Providers.tsx                |   2 +-
 packages/app/src/kits/Overlay/index.scss      | 503 ------------------
 .../src/kits/Overlay/structure/CanvasCard.tsx |  21 -
 .../Overlay/structure/CanvasContainer.tsx     |  16 -
 .../kits/Overlay/structure/CanvasContent.tsx  |  21 -
 .../src/kits/Overlay/structure/ModalCard.tsx  |  26 -
 .../Overlay/structure/ModalConnectItem.tsx    |  22 -
 .../kits/Overlay/structure/ModalContainer.tsx |  15 -
 .../kits/Overlay/structure/ModalContent.tsx   |  23 -
 .../Overlay/structure/ModalHardwareItem.tsx   |  14 -
 .../structure/ModalMotionThreeSection.tsx     |  18 -
 .../structure/ModalMotionTwoSection.tsx       |  18 -
 .../src/kits/Overlay/structure/ModalNotes.tsx |  22 -
 .../kits/Overlay/structure/ModalOverlay.tsx   |  23 -
 .../kits/Overlay/structure/ModalPadding.tsx   |  30 --
 .../kits/Overlay/structure/ModalScroll.tsx    |  30 --
 .../kits/Overlay/structure/ModalSection.tsx   |  21 -
 .../kits/Overlay/structure/ModalSeparator.tsx |   8 -
 .../kits/Overlay/structure/ModalWarnings.tsx  |  22 -
 .../app/src/library/AccountInput/index.tsx    |   2 +-
 packages/app/src/library/Headers/Connect.tsx  |   2 +-
 packages/app/src/library/Help/Wrappers.ts     |  10 +
 packages/app/src/library/Help/index.tsx       |  19 +-
 .../app/src/library/Import/NoAccounts.tsx     |   2 +-
 .../src/library/ListItem/Labels/Metrics.tsx   |   2 +-
 .../app/src/library/ListItem/Labels/More.tsx  |   2 +-
 packages/app/src/library/Modal/Close.tsx      |   2 +-
 packages/app/src/library/Modal/Title.tsx      |   9 +-
 .../app/src/library/Nominations/index.tsx     |   2 +-
 packages/app/src/library/SideMenu/index.tsx   |   2 +-
 .../SubmitTx/ManualSign/Ledger/index.tsx      |   2 +-
 packages/app/src/library/SubmitTx/index.tsx   |   2 +-
 .../ValidatorList/ValidatorItem/Default.tsx   |   2 +-
 .../app/src/library/ValidatorList/index.tsx   |   2 +-
 .../app/src/library/WithdrawPrompt/index.tsx  |   2 +-
 packages/app/src/main.tsx                     |   9 +-
 .../canvas/CreatePool/Summary/index.tsx       |   2 +-
 .../src/overlay/canvas/CreatePool/index.tsx   |   2 +-
 .../src/overlay/canvas/JoinPool/Header.tsx    |   2 +-
 .../canvas/JoinPool/Overview/JoinForm.tsx     |   2 +-
 .../src/overlay/canvas/JoinPool/Preloader.tsx |   2 +-
 .../app/src/overlay/canvas/JoinPool/index.tsx |   2 +-
 .../canvas/ManageNominations/index.tsx        |   2 +-
 .../canvas/NominatorSetup/Summary/index.tsx   |   2 +-
 .../overlay/canvas/NominatorSetup/index.tsx   |   2 +-
 .../PoolMembers/Prompts/UnbondMember.tsx      |   6 +-
 .../PoolMembers/Prompts/WithdrawMember.tsx    |   6 +-
 .../src/overlay/canvas/PoolMembers/index.tsx  |   2 +-
 packages/app/src/overlay/index.tsx            |   2 +-
 .../src/overlay/modals/Accounts/Account.tsx   |   2 +-
 .../app/src/overlay/modals/Accounts/index.tsx |   7 +-
 .../src/overlay/modals/BalanceTest/index.tsx  |   6 +-
 packages/app/src/overlay/modals/Bio/index.tsx |   4 +-
 .../app/src/overlay/modals/Bond/index.tsx     |   9 +-
 .../overlay/modals/ChangePoolRoles/index.tsx  |   6 +-
 .../overlay/modals/ChooseLanguage/index.tsx   |   4 +-
 .../src/overlay/modals/ClaimPayouts/Forms.tsx |   7 +-
 .../overlay/modals/ClaimPayouts/Overview.tsx  |   3 +-
 .../src/overlay/modals/ClaimPayouts/index.tsx |  23 +-
 .../src/overlay/modals/ClaimReward/index.tsx  |  11 +-
 .../src/overlay/modals/Connect/Extension.tsx  |   7 +-
 .../app/src/overlay/modals/Connect/Ledger.tsx |  13 +-
 .../src/overlay/modals/Connect/ReadOnly.tsx   |   2 +-
 .../app/src/overlay/modals/Connect/Vault.tsx  |  13 +-
 .../overlay/modals/Connect/WalletConnect.tsx  |  13 +-
 .../src/overlay/modals/Connect/Wrappers.ts    |  79 +++
 .../app/src/overlay/modals/Connect/index.tsx  |  33 +-
 .../overlay/modals/DiscordSupport/index.tsx   |   2 +-
 .../src/overlay/modals/DismissTips/index.tsx  |   9 +-
 .../overlay/modals/ImportLedger/Manage.tsx    |   2 +-
 .../src/overlay/modals/ImportLedger/Reset.tsx |   2 +-
 .../overlay/modals/ImportLedger/Splash.tsx    |   2 +-
 .../src/overlay/modals/ImportLedger/index.tsx |   2 +-
 .../src/overlay/modals/ImportVault/index.tsx  |   2 +-
 .../modals/ImportWalletConnect/index.tsx      |   2 +-
 .../src/overlay/modals/LeavePool/index.tsx    |   7 +-
 .../src/overlay/modals/MailSupport/index.tsx  |   2 +-
 .../modals/ManageFastUnstake/index.tsx        |  17 +-
 .../Forms/ClaimCommission/index.tsx           |   8 +-
 .../Forms/ManageCommission/index.tsx          |   7 +-
 .../ManagePool/Forms/RenamePool/index.tsx     |   7 +-
 .../Forms/SetClaimPermission/index.tsx        |   7 +-
 .../ManagePool/Forms/SetPoolState/index.tsx   |   7 +-
 .../src/overlay/modals/ManagePool/index.tsx   |  25 +-
 .../app/src/overlay/modals/Networks/index.tsx |   4 +-
 .../app/src/overlay/modals/Settings/index.tsx |   2 +-
 .../overlay/modals/StopNominations/index.tsx  |  11 +-
 .../app/src/overlay/modals/Unbond/index.tsx   |  15 +-
 .../src/overlay/modals/UnlockChunks/Forms.tsx |   7 +-
 .../overlay/modals/UnlockChunks/Overview.tsx  |   3 +-
 .../src/overlay/modals/UnlockChunks/index.tsx |  23 +-
 .../app/src/overlay/modals/Unstake/index.tsx  |   9 +-
 .../src/overlay/modals/UpdatePayee/index.tsx  |   9 +-
 .../overlay/modals/UpdateReserve/index.tsx    |   4 +-
 .../src/overlay/modals/ValidatorGeo/index.tsx |  10 +-
 .../overlay/modals/ValidatorMetrics/index.tsx |  11 +-
 packages/app/src/pages/Community/Item.tsx     |   2 +-
 .../Nominate/Active/CommissionPrompt.tsx      |   2 +-
 .../src/pages/Nominate/Active/ManageBond.tsx  |   2 +-
 .../Nominate/Active/Status/NewNominator.tsx   |   2 +-
 .../Active/Status/NominationStatus.tsx        |   2 +-
 .../Active/Status/PayoutDestinationStatus.tsx |   2 +-
 .../Active/Status/UnclaimedPayoutsStatus.tsx  |   2 +-
 .../pages/Nominate/Active/UnstakePrompts.tsx  |   2 +-
 .../app/src/pages/Nominate/Active/index.tsx   |   2 +-
 .../Overview/AccountBalance/BalanceChart.tsx  |   2 +-
 .../app/src/pages/Pools/ClosurePrompts.tsx    |   2 +-
 packages/app/src/pages/Pools/ManageBond.tsx   |   2 +-
 .../app/src/pages/Pools/ManagePool/index.tsx  |   2 +-
 .../app/src/pages/Pools/PoolStats/index.tsx   |   2 +-
 packages/app/src/pages/Pools/Roles/index.tsx  |   2 +-
 .../pages/Pools/Status/MembershipStatus.tsx   |   2 +-
 .../app/src/pages/Pools/Status/NewMember.tsx  |   2 +-
 .../src/pages/Pools/Status/RewardsStatus.tsx  |   2 +-
 packages/ui-overlay/package.json              |  16 +
 .../Overlay => ui-overlay/src}/Background.tsx |   4 +-
 .../Overlay => ui-overlay/src}/Canvas.tsx     |   8 +-
 .../kits/Overlay => ui-overlay/src}/Modal.tsx |  80 ++-
 .../index.tsx => ui-overlay/src/Overlay.tsx}  |   0
 .../src}/Provider/defaults.ts                 |   0
 .../src}/Provider/index.tsx                   |  59 +-
 .../src}/Provider/types.ts                    |   0
 packages/ui-overlay/src/index.tsx             |   5 +
 .../CanvasContainer/index.module.scss         |  12 +
 .../src/structure/CanvasContainer/index.tsx   |  20 +
 .../structure/CanvasContent/index.module.scss |  10 +
 .../src/structure/CanvasContent/index.tsx     |   9 +
 .../structure/CanvasScroll/index.module.scss  |  19 +
 .../src/structure/CanvasScroll/index.tsx}     |  14 +-
 .../ModalAddressHeader/index.module.scss      |   9 +
 .../structure/ModalAddressHeader/index.tsx    |   9 +
 .../src/structure/ModalCard/index.module.scss |  10 +
 .../src/structure/ModalCard/index.tsx         |  26 +
 .../ModalContainer/index.module.scss          |  20 +
 .../src/structure/ModalContainer/index.tsx    |  33 ++
 .../structure/ModalContent/index.module.scss  |  14 +
 .../src/structure/ModalContent/index.tsx      |  14 +
 .../ModalCustomHeader/index.module.scss       |  24 +
 .../structure/ModalCustomHeader/index.tsx}    |   7 +-
 .../ModalFixedTitle/index.module.scss         |  13 +
 .../src/structure/ModalFixedTitle/index.tsx}  |  28 +-
 .../structure/ModalMulti/index.module.scss    |  19 +
 .../src/structure/ModalMulti/index.tsx        |  13 +
 .../ModalMultiThree/index.module.scss         |  10 +
 .../src/structure/ModalMultiThree/index.tsx   |  17 +
 .../structure/ModalMultiTwo/index.module.scss |  10 +
 .../src/structure/ModalMultiTwo/index.tsx     |  17 +
 .../structure/ModalNotes/index.module.scss    |  13 +
 .../src/structure/ModalNotes/index.tsx        |  13 +
 .../structure/ModalPadding/index.module.scss  |  16 +
 .../src/structure/ModalPadding/index.tsx      |  27 +
 .../structure/ModalScroll/index.module.scss   |  17 +
 .../src/structure/ModalScroll/index.tsx       |  31 ++
 .../structure/ModalSection/index.module.scss  |  17 +
 .../src/structure/ModalSection/index.tsx      |  18 +
 .../structure/ModalTitle/index.module.scss    |   9 +
 .../src/structure/ModalTitle/index.tsx        |   9 +
 .../structure/ModalWarnings/index.module.scss |   7 +
 .../src/structure/ModalWarnings/index.tsx}    |   9 +-
 .../OverlayBackground/index.module.scss       |   9 +
 .../src/structure/OverlayBackground/index.tsx |  28 +
 .../src/structure/common.module.scss          |  34 ++
 packages/ui-overlay/src/structure/index.tsx   |  23 +
 .../kits/Overlay => ui-overlay/src}/types.ts  |  22 +-
 packages/ui-overlay/tsconfig.json             |  20 +
 .../ui-structure/src/Main/index.module.scss   |   2 +-
 yarn.lock                                     |  13 +-
 169 files changed, 1093 insertions(+), 1258 deletions(-)
 delete mode 100644 packages/app/src/kits/Overlay/index.scss
 delete mode 100644 packages/app/src/kits/Overlay/structure/CanvasCard.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/CanvasContainer.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/CanvasContent.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalCard.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalConnectItem.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalContainer.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalContent.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalHardwareItem.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalMotionThreeSection.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalMotionTwoSection.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalNotes.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalOverlay.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalPadding.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalScroll.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalSection.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalSeparator.tsx
 delete mode 100644 packages/app/src/kits/Overlay/structure/ModalWarnings.tsx
 create mode 100644 packages/ui-overlay/package.json
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/Background.tsx (94%)
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/Canvas.tsx (92%)
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/Modal.tsx (69%)
 rename packages/{app/src/kits/Overlay/index.tsx => ui-overlay/src/Overlay.tsx} (100%)
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/Provider/defaults.ts (100%)
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/Provider/index.tsx (83%)
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/Provider/types.ts (100%)
 create mode 100644 packages/ui-overlay/src/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/CanvasContainer/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/CanvasContainer/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/CanvasContent/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/CanvasContent/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/CanvasScroll/index.module.scss
 rename packages/{app/src/kits/Overlay/structure/CanvasScroll.tsx => ui-overlay/src/structure/CanvasScroll/index.tsx} (51%)
 create mode 100644 packages/ui-overlay/src/structure/ModalAddressHeader/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalAddressHeader/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalCard/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalCard/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalContainer/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalContainer/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalContent/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalContent/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalCustomHeader/index.module.scss
 rename packages/{app/src/kits/Overlay/structure/ModalCustomHeader.tsx => ui-overlay/src/structure/ModalCustomHeader/index.tsx} (66%)
 create mode 100644 packages/ui-overlay/src/structure/ModalFixedTitle/index.module.scss
 rename packages/{app/src/kits/Overlay/structure/ModalFixedTitle.tsx => ui-overlay/src/structure/ModalFixedTitle/index.tsx} (52%)
 create mode 100644 packages/ui-overlay/src/structure/ModalMulti/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalMulti/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalMultiThree/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalMultiThree/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalMultiTwo/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalMultiTwo/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalNotes/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalNotes/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalPadding/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalPadding/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalScroll/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalScroll/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalSection/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalSection/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalTitle/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/ModalTitle/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/ModalWarnings/index.module.scss
 rename packages/{app/src/kits/Overlay/structure/ModalFooter.tsx => ui-overlay/src/structure/ModalWarnings/index.tsx} (52%)
 create mode 100644 packages/ui-overlay/src/structure/OverlayBackground/index.module.scss
 create mode 100644 packages/ui-overlay/src/structure/OverlayBackground/index.tsx
 create mode 100644 packages/ui-overlay/src/structure/common.module.scss
 create mode 100644 packages/ui-overlay/src/structure/index.tsx
 rename packages/{app/src/kits/Overlay => ui-overlay/src}/types.ts (59%)
 create mode 100644 packages/ui-overlay/tsconfig.json

diff --git a/package.json b/package.json
index d04d5b2e32..940458cbca 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,10 @@
     "bignumber.js": "^9.1.2",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^11.11.1",
     "i18next": "^24.2.0",
+    "react": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-i18next": "^15.4.0"
   },
   "packageManager": "yarn@4.1.1",
diff --git a/packages/app/package.json b/packages/app/package.json
index e868510231..39975c833f 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -39,7 +39,6 @@
     "chroma-js": "^3.1.1",
     "compare-versions": "^6.1.1",
     "consts": "workspace:*",
-    "framer-motion": "^11.11.1",
     "html5-qrcode": "^2.3.8",
     "i18next-browser-languagedetector": "^8.0.2",
     "locales": "workspace:*",
@@ -47,10 +46,8 @@
     "polkadot-api": "^1.8.0",
     "qrcode-generator": "1.4.4",
     "rc-slider": "^11.1.6",
-    "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^7.1.1",
     "react-scroll": "^1.9.0",
@@ -59,6 +56,7 @@
     "styles": "workspace:*",
     "types": "workspace:*",
     "ui-buttons": "workspace:*",
+    "ui-overlay": "workspace:*",
     "ui-structure": "workspace:*",
     "usehooks-ts": "^3.0.2",
     "utils": "workspace:*",
diff --git a/packages/app/src/Providers.tsx b/packages/app/src/Providers.tsx
index bc2e1c4dea..b9f9bf9434 100644
--- a/packages/app/src/Providers.tsx
+++ b/packages/app/src/Providers.tsx
@@ -44,8 +44,8 @@ import { UIProvider } from 'contexts/UI'
 import { FavoriteValidatorsProvider } from 'contexts/Validators/FavoriteValidators'
 import { ValidatorsProvider } from 'contexts/Validators/ValidatorEntries'
 import { WalletConnectProvider } from 'contexts/WalletConnect'
-import { OverlayProvider } from 'kits/Overlay/Provider'
 import { ThemedRouter } from 'Themes'
+import { OverlayProvider } from 'ui-overlay'
 
 export const Providers = () => {
   const {
diff --git a/packages/app/src/kits/Overlay/index.scss b/packages/app/src/kits/Overlay/index.scss
deleted file mode 100644
index db3d9c9ae9..0000000000
--- a/packages/app/src/kits/Overlay/index.scss
+++ /dev/null
@@ -1,503 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-/* Mixins */
-
-@mixin modal-position {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-@mixin modal-motion-sections {
-  display: flex;
-  height: auto;
-  position: relative;
-  overflow: hidden auto;
-}
-
-@mixin modal-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: inherit transparent;
-
-  ::-webkit-scrollbar {
-    width: 0.1rem;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-    border: 0;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: transparent; /* color of the scroll thumb */
-    border-radius: 2rem; /* roundness of the scroll thumb */
-    border: 0.1rem solid transparent; /* creates padding around scroll thumb */
-  }
-}
-
-/* Component styles */
-
-.modal-canvas-card {
-  background: var(--background-floating-card);
-  border-radius: 1.5rem;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 1.25rem;
-  padding: 1rem;
-  width: 100%;
-
-  h2 {
-    color: var(--text-color-primary);
-    padding: 0 0.75rem;
-    margin: 0.5rem 0;
-    width: 100%;
-  }
-}
-
-.modal-canvas {
-  @include modal-position;
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  padding: 0 3rem;
-  position: fixed;
-  z-index: 10;
-
-  /* click anywhere behind modal content to close */
-  .close {
-    @include modal-position;
-
-    z-index: 8;
-    cursor: default;
-  }
-}
-
-.modal-canvas-content {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.canvas-scroll {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden auto;
-  z-index: 9;
-  max-width: 800px;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &.xl {
-    max-width: 1250px;
-  }
-}
-
-.modal-card {
-  background: var(--background-modal);
-  transition: opacity 0.15s;
-
-  &.dimmed {
-    opacity: 0;
-  }
-
-  h2 {
-    margin: 1rem 0;
-
-    &.unbounded {
-      font-family: Poppins700, sans-serif;
-      font-weight: 700;
-    }
-
-    &.title {
-      font-size: 1.5rem;
-      margin: 1.25rem 0 0;
-    }
-  }
-
-  a {
-    color: var(--accent-color-primary);
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    padding: 1rem 1rem 0;
-    width: 100%;
-  }
-
-  .body {
-    padding: 1rem;
-  }
-}
-
-.modal-connect-item {
-  padding: 0.5rem;
-  flex-grow: 0;
-  width: 50%;
-
-  @media (max-width: 800px) {
-    width: 100%;
-  }
-
-  &.can-connect {
-    > .inner {
-      transition: transform 0.15s;
-
-      &:hover {
-        transform: scale(1.015);
-      }
-    }
-  }
-
-  .foot {
-    padding: 0.85rem;
-
-    .link {
-      color: var(--text-color-secondary);
-      transition: color 0.15s;
-
-      &:hover {
-        color: var(--accent-color-primary);
-      }
-
-      > svg {
-        margin-left: 0.35rem;
-        margin-top: 0.3rem;
-      }
-    }
-  }
-}
-
-.modal-container {
-  @include modal-position;
-
-  z-index: 9;
-
-  > div {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem 2rem;
-
-    /* click anywhere behind modal content to close */
-    .close {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      z-index: 8;
-      cursor: default;
-    }
-  }
-}
-
-.modal-content {
-  width: 100%;
-  height: auto;
-  overflow: hidden;
-  position: relative;
-  padding: 5rem 0;
-
-  > .buttons {
-    width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-    margin-bottom: 2rem;
-    position: relative;
-
-    > button {
-      border: 1px solid var(--accent-color-primary);
-      color: var(--accent-color-primary);
-      border-radius: 1.5rem;
-      padding: 0.4rem 0.8rem;
-
-      > svg {
-        margin-right: 0.5rem;
-      }
-    }
-  }
-
-  &.canvas {
-    padding: 0;
-    min-height: 100vh;
-  }
-
-  h1 {
-    font-family: Poppins700, sans-serif;
-    margin-bottom: 1.75rem;
-  }
-
-  h3 {
-    font-family: InterSemiBold, sans-serif;
-    margin: 2rem 0.5rem 1rem;
-  }
-}
-
-.modal-custom-header {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0.5rem;
-  position: relative;
-
-  > div {
-    &.first {
-      display: flex;
-      flex-grow: 1;
-
-      h1 {
-        color: var(--text-color-primary);
-        font-size: 1.4rem;
-        font-family: Poppins700, sans-serif;
-        font-weight: 700;
-        padding: 0 0.5rem;
-        display: flex;
-        align-items: center;
-
-        > button {
-          margin-left: 1.25rem;
-        }
-      }
-    }
-  }
-
-  .close-modal {
-    position: absolute;
-    top: 0;
-    right: 1.5rem;
-    opacity: 0.25;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-.modal-fixed-title {
-  width: 100%;
-  background: transparent;
-  padding: 1rem 0 0;
-
-  &.with-style {
-    background: var(--background-default);
-    padding: 1rem 1rem 0;
-  }
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  h3 {
-    color: var(--text-color-secondary);
-    opacity: 0.5;
-    position: relative;
-    top: 1.25rem;
-
-    &.active {
-      color: var(--accent-color-primary);
-      opacity: 1;
-    }
-  }
-}
-
-.modal-hardware-item {
-  background: var(--button-primary-background);
-  border-radius: 1rem;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-
-  .body {
-    padding: 0.5rem 0.85rem;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .row {
-      display: flex;
-      justify-content: center;
-
-      p {
-        margin-bottom: 0;
-      }
-
-      &.margin {
-        margin-top: 0.75rem;
-      }
-
-      .logo {
-        color: var(--text-color-secondary);
-        height: 3rem;
-        margin: 0.75rem 0.5rem 0.5rem;
-      }
-    }
-
-    .status {
-      position: absolute;
-      top: 0.9rem;
-      right: 0.9rem;
-    }
-  }
-}
-
-.modal-motion-three-sections {
-  @include modal-motion-sections;
-
-  width: 300%;
-
-  > .section {
-    @include modal-scrollbar;
-
-    border-radius: 1rem;
-    display: flex;
-    flex-direction: column;
-    flex-basis: 33.33%;
-    min-width: 33.33%;
-    height: auto;
-    overflow: hidden auto;
-    flex-grow: 1;
-  }
-}
-
-.modal-motion-two-sections {
-  @include modal-motion-sections;
-
-  width: 200%;
-
-  > .section {
-    @include modal-scrollbar;
-
-    border-radius: 1rem;
-    display: flex;
-    flex-direction: column;
-    flex-basis: 50%;
-    min-width: 50%;
-    height: auto;
-    overflow: hidden auto;
-    flex-grow: 1;
-  }
-}
-
-.modal-notes {
-  width: 100%;
-  padding: 0;
-
-  &.with-padding {
-    padding: 0.75rem 0;
-  }
-
-  > p {
-    color: var(--text-color-secondary);
-  }
-}
-
-.modal-overlay {
-  @include modal-position;
-
-  background: var(--modal-background-color);
-  transition: backdrop-filter 0.5s;
-  backdrop-filter: blur(4px);
-  z-index: 9;
-}
-
-.modal-padding {
-  display: flex;
-  flex-flow: column wrap;
-  padding: 1rem;
-
-  &.vertical-only {
-    padding: 1rem 0 0.25rem;
-  }
-
-  &.horizontal-only {
-    padding: 0 1rem;
-  }
-}
-
-.modal-scroll {
-  @include modal-scrollbar;
-
-  border-radius: 1.5rem;
-  position: relative;
-  z-index: 9;
-  max-height: 100%;
-  width: 100%;
-  max-width: 600px;
-
-  &.lg {
-    max-width: 800px;
-  }
-
-  &.xl {
-    max-width: 1250px;
-  }
-
-  &.transition-height {
-    transition: height 0.5s cubic-bezier(0.1, 1, 0.2, 1);
-  }
-
-  ::-webkit-scrollbar {
-    width: 0.1rem;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-    border: 0;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: transparent; /* color of the scroll thumb */
-    border-radius: 2rem; /* roundness of the scroll thumb */
-    border: 0.1rem solid transparent; /* creates padding around scroll thumb */
-  }
-}
-
-.modal-carousel {
-  display: flex;
-  flex-flow: column wrap;
-  padding: 0;
-  position: relative;
-  overflow: hidden auto;
-  width: 100%;
-}
-
-.modal-tabs {
-  width: 100%;
-  display: flex;
-  margin: 1.25rem 0 0.25rem;
-}
-
-.modal-separator {
-  border-top: 1px solid var(--text-color-secondary);
-  width: 100%;
-  opacity: 0.1;
-  margin: 0.8rem 0;
-}
-
-.modal-warnings {
-  margin-top: 0;
-  width: 100%;
-
-  &.with-margin {
-    margin-top: 0.75rem;
-  }
-}
diff --git a/packages/app/src/kits/Overlay/structure/CanvasCard.tsx b/packages/app/src/kits/Overlay/structure/CanvasCard.tsx
deleted file mode 100644
index 09b38f1a68..0000000000
--- a/packages/app/src/kits/Overlay/structure/CanvasCard.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { ComponentBaseWithClassName } from '@w3ux/types'
-
-/**
- * @name CanvasCard
- * @summary Modal canvas card wrapper.
- */
-export const CanvasCard = ({
-  children,
-  style,
-  className,
-}: ComponentBaseWithClassName) => (
-  <div
-    className={`modal-canvas-card${className ? ` ${className}` : ''}`}
-    style={style}
-  >
-    {children}
-  </div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/CanvasContainer.tsx b/packages/app/src/kits/Overlay/structure/CanvasContainer.tsx
deleted file mode 100644
index 6b4c983dcc..0000000000
--- a/packages/app/src/kits/Overlay/structure/CanvasContainer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../types'
-
-/**
- * @name CanvasContainer
- * @summary Modal background wrapper with a thick blurred backround, suitable for text content to
- * overlay it.
- */
-export const CanvasContainer = ({ children, ...rest }: ModalAnimationProps) => (
-  <motion.div className="modal-canvas" {...rest}>
-    {children}
-  </motion.div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/CanvasContent.tsx b/packages/app/src/kits/Overlay/structure/CanvasContent.tsx
deleted file mode 100644
index 92f45c2707..0000000000
--- a/packages/app/src/kits/Overlay/structure/CanvasContent.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { ComponentBaseWithClassName } from '@w3ux/types'
-
-/**
- * @name CanvasContent
- * @summary Modal canvas content wrapper.
- */
-export const CanvasContent = ({
-  children,
-  style,
-  className,
-}: ComponentBaseWithClassName) => (
-  <div
-    className={`modal-canvas-content${className ? ` ${className}` : ''}`}
-    style={style}
-  >
-    {children}
-  </div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalCard.tsx b/packages/app/src/kits/Overlay/structure/ModalCard.tsx
deleted file mode 100644
index d18069a6f7..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalCard.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { ComponentBaseWithClassName } from '@w3ux/types'
-import type { ForwardedRef } from 'react'
-import { forwardRef } from 'react'
-
-/**
- * @name ModalCard
- * @summary Modal card wrapper.
- */
-export const ModalCard = forwardRef(
-  (
-    { children, style, className }: ComponentBaseWithClassName,
-    ref?: ForwardedRef<HTMLDivElement>
-  ) => (
-    <div
-      ref={ref}
-      className={`modal-card${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-)
-ModalCard.displayName = 'ModalCard'
diff --git a/packages/app/src/kits/Overlay/structure/ModalConnectItem.tsx b/packages/app/src/kits/Overlay/structure/ModalConnectItem.tsx
deleted file mode 100644
index 311275187d..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalConnectItem.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import type { ModalConnectItemProps } from '../types'
-
-/**
- * @name  ModalConnectItem
- * @summary Wrapper for a modal connect item.
- */
-export const ModalConnectItem = ({
-  children,
-  style,
-  canConnect,
-}: ModalConnectItemProps) => (
-  <div
-    className={`modal-connect-item${appendOrEmpty(canConnect, 'can-connect')}`}
-    style={style}
-  >
-    {children}
-  </div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalContainer.tsx b/packages/app/src/kits/Overlay/structure/ModalContainer.tsx
deleted file mode 100644
index 2e023d8ad6..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalContainer.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../types'
-
-/**
- * @name ModalContainer
- * @summary Modal container wrapper.
- */
-export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => (
-  <motion.div className="modal-container" {...rest}>
-    {children}
-  </motion.div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalContent.tsx b/packages/app/src/kits/Overlay/structure/ModalContent.tsx
deleted file mode 100644
index 1b35d84652..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalContent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import { motion } from 'framer-motion'
-import type { ModalContentProps } from '../types'
-
-/**
- * @name ModalContent
- * @summary Modal content wrapper for `ModalContainer` and `CanvasContainer`.
- */
-export const ModalContent = ({
-  children,
-  canvas,
-  ...rest
-}: ModalContentProps) => (
-  <motion.div
-    className={`modal-content${appendOrEmpty(canvas, 'canvas')}`}
-    {...rest}
-  >
-    {children}
-  </motion.div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalHardwareItem.tsx b/packages/app/src/kits/Overlay/structure/ModalHardwareItem.tsx
deleted file mode 100644
index 0b79aa7b83..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalHardwareItem.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { ComponentBase } from '@w3ux/types'
-
-/**
- * @name  ModalHardwareItem
- * @summary Inner wrapper for a hardware connect item.
- */
-export const ModalHardwareItem = ({ children, style }: ComponentBase) => (
-  <div className={'modal-hardware-item'} style={style}>
-    {children}
-  </div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalMotionThreeSection.tsx b/packages/app/src/kits/Overlay/structure/ModalMotionThreeSection.tsx
deleted file mode 100644
index a5e2e161f4..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalMotionThreeSection.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../types'
-
-/**
- * @name ModalMotionThreeSection
- * @summary Three section wrapper with motion animation.
- */
-export const ModalMotionThreeSection = ({
-  children,
-  ...rest
-}: ModalAnimationProps) => (
-  <motion.div className="modal-motion-three-sections" {...rest}>
-    {children}
-  </motion.div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalMotionTwoSection.tsx b/packages/app/src/kits/Overlay/structure/ModalMotionTwoSection.tsx
deleted file mode 100644
index 969d242d91..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalMotionTwoSection.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../types'
-
-/**
- * @name ModalMotionTwoSection
- * @summary Two section wrapper with motion animation.
- */
-export const ModalMotionTwoSection = ({
-  children,
-  ...rest
-}: ModalAnimationProps) => (
-  <motion.div className="modal-motion-two-sections" {...rest}>
-    {children}
-  </motion.div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalNotes.tsx b/packages/app/src/kits/Overlay/structure/ModalNotes.tsx
deleted file mode 100644
index 11d9d2c3da..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalNotes.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import type { ModalNotesProps } from '../types'
-
-/**
- * @name ModalNotes
- * @summary Note styling.
- */
-export const ModalNotes = ({
-  children,
-  style,
-  withPadding,
-}: ModalNotesProps) => (
-  <div
-    className={`modal-notes${appendOrEmpty(withPadding, 'with-padding')}`}
-    style={style}
-  >
-    {children}
-  </div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalOverlay.tsx b/packages/app/src/kits/Overlay/structure/ModalOverlay.tsx
deleted file mode 100644
index 183e8b7fae..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalOverlay.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { motion } from 'framer-motion'
-import type { ModalOverlayProps } from '../types'
-
-/**
- * @name ModalOverlay
- * @summary Modal overlay wrapper, providing a transparent background to overlaying content.
- */
-export const ModalOverlay = ({
-  children,
-  blur,
-  ...rest
-}: ModalOverlayProps) => (
-  <motion.div
-    style={blur ? { backdropFilter: `blur(${blur})` } : undefined}
-    className="modal-overlay"
-    {...rest}
-  >
-    {children}
-  </motion.div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalPadding.tsx b/packages/app/src/kits/Overlay/structure/ModalPadding.tsx
deleted file mode 100644
index c99174f53b..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalPadding.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import type { ForwardedRef } from 'react'
-import { forwardRef } from 'react'
-import type { ModalPaddingProps } from '../types'
-
-/**
- * @name ModalPadding
- * @summary Generic wrapper for modal padding.
- */
-export const ModalPadding = forwardRef(
-  (
-    { children, style, verticalOnly, horizontalOnly }: ModalPaddingProps,
-    ref?: ForwardedRef<HTMLDivElement>
-  ) => (
-    <div
-      ref={ref}
-      className={`modal-padding${appendOrEmpty(
-        verticalOnly,
-        'vertical-only'
-      )}${appendOrEmpty(horizontalOnly, 'horizontal-only')}`}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-)
-ModalPadding.displayName = 'ModalPadding'
diff --git a/packages/app/src/kits/Overlay/structure/ModalScroll.tsx b/packages/app/src/kits/Overlay/structure/ModalScroll.tsx
deleted file mode 100644
index e69d86bfb6..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalScroll.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import type { ForwardedRef } from 'react'
-import { forwardRef } from 'react'
-import type { ModalScrollProps } from '../types'
-
-/**
- * @name ModalScroll
- * @summary Used for modal window height.
- */
-export const ModalScroll = forwardRef(
-  (
-    { size, children, style }: ModalScrollProps,
-    ref?: ForwardedRef<HTMLDivElement>
-  ) => (
-    <div
-      ref={ref}
-      className={`modal-scroll${appendOrEmpty(size === 'xl', 'xl')}${appendOrEmpty(
-        size === 'lg',
-        'lg'
-      )}`}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-)
-ModalScroll.displayName = 'ModalScroll'
diff --git a/packages/app/src/kits/Overlay/structure/ModalSection.tsx b/packages/app/src/kits/Overlay/structure/ModalSection.tsx
deleted file mode 100644
index 8440e082f5..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalSection.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import type { ModalSectionProps } from '../types'
-
-/**
- * @name  ModalSection
- * @summary Section wrapper.
- */
-export const ModalSection = ({ children, style, type }: ModalSectionProps) => (
-  <div
-    className={`${appendOrEmpty(type === 'carousel', 'modal-carousel')}${appendOrEmpty(
-      type === 'tab',
-      'modal-tabs'
-    )}`}
-    style={style}
-  >
-    {children}
-  </div>
-)
diff --git a/packages/app/src/kits/Overlay/structure/ModalSeparator.tsx b/packages/app/src/kits/Overlay/structure/ModalSeparator.tsx
deleted file mode 100644
index 08009e0044..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalSeparator.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-/**
- * @name ModalSeparator
- * @summary A line to separate the content.
- */
-export const ModalSeparator = () => <div className="modal-separator" />
diff --git a/packages/app/src/kits/Overlay/structure/ModalWarnings.tsx b/packages/app/src/kits/Overlay/structure/ModalWarnings.tsx
deleted file mode 100644
index 4cb14f8578..0000000000
--- a/packages/app/src/kits/Overlay/structure/ModalWarnings.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOrEmpty } from '@w3ux/utils'
-import type { ModalWarningsProps } from '../types'
-
-/**
- * @name ModalWarnings
- * @summary Warnings styling.
- */
-export const ModalWarnings = ({
-  children,
-  style,
-  withMargin,
-}: ModalWarningsProps) => (
-  <div
-    className={`modal-warnings${appendOrEmpty(withMargin, 'with-margin')}`}
-    style={style}
-  >
-    {children}
-  </div>
-)
diff --git a/packages/app/src/library/AccountInput/index.tsx b/packages/app/src/library/AccountInput/index.tsx
index 11b239bb86..a420eb2325 100644
--- a/packages/app/src/library/AccountInput/index.tsx
+++ b/packages/app/src/library/AccountInput/index.tsx
@@ -7,11 +7,11 @@ import { Polkicon } from '@w3ux/react-polkicon'
 import { formatAccountSs58, isValidAddress } from '@w3ux/utils'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useNetwork } from 'contexts/Network'
-import { useOverlay } from 'kits/Overlay/Provider'
 import type { FormEvent } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSecondary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { AccountInputWrapper } from './Wrapper'
 import type { AccountInputProps } from './types'
 
diff --git a/packages/app/src/library/Headers/Connect.tsx b/packages/app/src/library/Headers/Connect.tsx
index f4e97c7cbb..74fb852137 100644
--- a/packages/app/src/library/Headers/Connect.tsx
+++ b/packages/app/src/library/Headers/Connect.tsx
@@ -3,9 +3,9 @@
 
 import { faPlug, faWallet } from '@fortawesome/free-solid-svg-icons'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { useTranslation } from 'react-i18next'
 import { ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ConnectedAccount, HeadingWrapper } from './Wrappers'
 
 export const Connect = () => {
diff --git a/packages/app/src/library/Help/Wrappers.ts b/packages/app/src/library/Help/Wrappers.ts
index 3dd9d3b7fc..8dd999a22a 100644
--- a/packages/app/src/library/Help/Wrappers.ts
+++ b/packages/app/src/library/Help/Wrappers.ts
@@ -89,6 +89,16 @@ export const DefinitionWrapper = styled(motion.div)`
   }
 `
 
+export const HelpTitle = styled.h1`
+  font-family: Poppins700, sans-serif;
+  margin: 1.75rem 0;
+`
+
+export const HelpSubtitle = styled.h3`
+  font-family: InterSemiBold, sans-serif;
+  margin: 2rem 0.5rem 1rem;
+`
+
 export const ItemWrapper = styled(motion.div)<{
   width: string | number
 }>`
diff --git a/packages/app/src/library/Help/index.tsx b/packages/app/src/library/Help/index.tsx
index 80a201ef1d..c6f15ef9bf 100644
--- a/packages/app/src/library/Help/index.tsx
+++ b/packages/app/src/library/Help/index.tsx
@@ -12,16 +12,19 @@ import type {
 } from 'contexts/Help/types'
 import { useAnimation } from 'framer-motion'
 import { useFillVariables } from 'hooks/useFillVariables'
-import { CanvasContainer } from 'kits/Overlay/structure/CanvasContainer'
-import { CanvasScroll } from 'kits/Overlay/structure/CanvasScroll'
-import { ModalContent } from 'kits/Overlay/structure/ModalContent'
 import { DefaultLocale } from 'locales'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimaryInvert } from 'ui-buttons'
+import {
+  CanvasContainer,
+  CanvasScroll,
+  ModalContent,
+} from 'ui-overlay/structure'
 import { ActiveDefinition } from './Items/ActiveDefinition'
 import { Definition } from './Items/Definition'
 import { External } from './Items/External'
+import { HelpSubtitle, HelpTitle } from './Wrappers'
 
 export const Help = () => {
   const { t, i18n } = useTranslation('help')
@@ -168,11 +171,11 @@ export const Help = () => {
               onClick={() => closeHelp()}
             />
           </div>
-          <h1>
+          <HelpTitle>
             {activeDefinition
               ? `${activeDefinition.title}`
               : `${t('modal.helpResources')}`}
-          </h1>
+          </HelpTitle>
 
           {activeDefinition !== null && (
             <ActiveDefinition description={activeDefinition?.description} />
@@ -180,10 +183,10 @@ export const Help = () => {
 
           {definitions.length > 0 && (
             <>
-              <h3>
+              <HelpSubtitle>
                 {activeDefinition ? `${t('modal.related')} ` : ''}
                 {t('modal.definitions')}
-              </h3>
+              </HelpSubtitle>
               {activeDefinitions.map((item, index: number) => (
                 <Definition
                   key={`def_${index}`}
@@ -196,7 +199,7 @@ export const Help = () => {
 
           {activeExternals.length > 0 && (
             <>
-              <h3>{t('modal.articles')}</h3>
+              <HelpSubtitle>{t('modal.articles')}</HelpSubtitle>
               {activeExternals.map((item, index: number) => (
                 <External
                   key={`ext_${index}`}
diff --git a/packages/app/src/library/Import/NoAccounts.tsx b/packages/app/src/library/Import/NoAccounts.tsx
index 27cb9bd0a5..48bcd61d73 100644
--- a/packages/app/src/library/Import/NoAccounts.tsx
+++ b/packages/app/src/library/Import/NoAccounts.tsx
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'
-import { useOverlay } from 'kits/Overlay/Provider'
 import type { FunctionComponent, ReactNode, SVGProps } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSecondary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { NoAccountsWrapper } from './Wrappers'
 
 export const NoAccounts = ({
diff --git a/packages/app/src/library/ListItem/Labels/Metrics.tsx b/packages/app/src/library/ListItem/Labels/Metrics.tsx
index d316a2319c..3c0ce1cb69 100644
--- a/packages/app/src/library/ListItem/Labels/Metrics.tsx
+++ b/packages/app/src/library/ListItem/Labels/Metrics.tsx
@@ -3,7 +3,7 @@
 
 import { faChartLine } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useOverlay } from 'kits/Overlay/Provider'
+import { useOverlay } from 'ui-overlay'
 import type { MetricsProps } from '../types'
 
 export const Metrics = ({ display, address }: MetricsProps) => {
diff --git a/packages/app/src/library/ListItem/Labels/More.tsx b/packages/app/src/library/ListItem/Labels/More.tsx
index c03f3ef255..48dc4bb1db 100644
--- a/packages/app/src/library/ListItem/Labels/More.tsx
+++ b/packages/app/src/library/ListItem/Labels/More.tsx
@@ -4,9 +4,9 @@
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { useTranslation } from 'react-i18next'
 import type { BondedPool } from 'types'
+import { useOverlay } from 'ui-overlay'
 
 export const More = ({
   pool,
diff --git a/packages/app/src/library/Modal/Close.tsx b/packages/app/src/library/Modal/Close.tsx
index c1769c2ba2..6a34b484d7 100644
--- a/packages/app/src/library/Modal/Close.tsx
+++ b/packages/app/src/library/Modal/Close.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import CrossSVG from 'assets/svg/cross.svg?react'
-import { useOverlay } from 'kits/Overlay/Provider'
+import { useOverlay } from 'ui-overlay'
 import { CloseWrapper } from './Wrappers'
 
 export const Close = () => {
diff --git a/packages/app/src/library/Modal/Title.tsx b/packages/app/src/library/Modal/Title.tsx
index 4fe22664b1..05afe95461 100644
--- a/packages/app/src/library/Modal/Title.tsx
+++ b/packages/app/src/library/Modal/Title.tsx
@@ -6,10 +6,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AnyJson } from '@w3ux/types'
 import CrossSVG from 'assets/svg/cross.svg?react'
 import { useHelp } from 'contexts/Help'
-import { useOverlay } from 'kits/Overlay/Provider'
 import type { FunctionComponent, SVGProps } from 'react'
 import type { CSSProperties } from 'styled-components'
 import { ButtonHelp } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalTitle } from 'ui-overlay/structure'
 import { TitleWrapper } from './Wrappers'
 
 interface TitleProps {
@@ -29,8 +30,8 @@ export const Title = ({
   Svg,
   style,
 }: TitleProps) => {
-  const { setModalStatus } = useOverlay().modal
   const { openHelp } = useHelp()
+  const { setModalStatus } = useOverlay().modal
 
   const graphic = Svg ? (
     <Svg style={{ width: '1.5rem', height: '1.5rem' }} />
@@ -43,12 +44,12 @@ export const Title = ({
       <div>
         {graphic}
         {title && (
-          <h2>
+          <ModalTitle>
             {title}
             {helpKey ? (
               <ButtonHelp marginLeft onClick={() => openHelp(helpKey)} />
             ) : null}
-          </h2>
+          </ModalTitle>
         )}
       </div>
       <div>
diff --git a/packages/app/src/library/Nominations/index.tsx b/packages/app/src/library/Nominations/index.tsx
index 2db1a6904f..3c13097174 100644
--- a/packages/app/src/library/Nominations/index.tsx
+++ b/packages/app/src/library/Nominations/index.tsx
@@ -11,13 +11,13 @@ import { useStaking } from 'contexts/Staking'
 import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { ListStatusHeader } from 'library/List'
 import { ValidatorList } from 'library/ValidatorList'
 import { useTranslation } from 'react-i18next'
 import type { MaybeAddress } from 'types'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { Wrapper } from './Wrapper'
 
 export const Nominations = ({
diff --git a/packages/app/src/library/SideMenu/index.tsx b/packages/app/src/library/SideMenu/index.tsx
index 75bd6c1d00..4e7b80f9f3 100644
--- a/packages/app/src/library/SideMenu/index.tsx
+++ b/packages/app/src/library/SideMenu/index.tsx
@@ -21,9 +21,9 @@ import { useNetwork } from 'contexts/Network'
 import { useTheme } from 'contexts/Themes'
 import { useUi } from 'contexts/UI'
 import type { UIContextInterface } from 'contexts/UI/types'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { Side } from 'ui-structure'
 import { Heading } from './Heading/Heading'
 import { Main } from './Main'
diff --git a/packages/app/src/library/SubmitTx/ManualSign/Ledger/index.tsx b/packages/app/src/library/SubmitTx/ManualSign/Ledger/index.tsx
index 9808a1f496..662b718a4a 100644
--- a/packages/app/src/library/SubmitTx/ManualSign/Ledger/index.tsx
+++ b/packages/app/src/library/SubmitTx/ManualSign/Ledger/index.tsx
@@ -9,12 +9,12 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useHelp } from 'contexts/Help'
 import { useLedgerHardware } from 'contexts/LedgerHardware'
 import type { LedgerResponse } from 'contexts/LedgerHardware/types'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { EstimatedTxFee } from 'library/EstimatedTxFee'
 import type { ReactNode } from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import type { SubmitProps } from '../../types'
 import { Submit } from './Submit'
 
diff --git a/packages/app/src/library/SubmitTx/index.tsx b/packages/app/src/library/SubmitTx/index.tsx
index 56eb84878d..8c1638aac2 100644
--- a/packages/app/src/library/SubmitTx/index.tsx
+++ b/packages/app/src/library/SubmitTx/index.tsx
@@ -8,10 +8,10 @@ import { useBonded } from 'contexts/Bonded'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useNetwork } from 'contexts/Network'
 import { useTxMeta } from 'contexts/TxMeta'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Tx } from 'library/Tx'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { Default } from './Default'
 import { ManualSign } from './ManualSign'
 import type { SubmitTxProps } from './types'
diff --git a/packages/app/src/library/ValidatorList/ValidatorItem/Default.tsx b/packages/app/src/library/ValidatorList/ValidatorItem/Default.tsx
index 78c95c48a5..b463b67bdc 100644
--- a/packages/app/src/library/ValidatorList/ValidatorItem/Default.tsx
+++ b/packages/app/src/library/ValidatorList/ValidatorItem/Default.tsx
@@ -6,13 +6,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AnyJson } from '@w3ux/types'
 import { useMenu } from 'contexts/Menu'
 import { usePlugins } from 'contexts/Plugins'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'
 import { ParaValidator } from 'library/ListItem/Labels/ParaValidator'
 import { Quartile } from 'library/ListItem/Labels/Quartile'
 import { Labels, Separator, Wrapper } from 'library/ListItem/Wrappers'
 import { MenuList } from 'library/Menu/List'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { useValidators } from '../../../contexts/Validators/ValidatorEntries'
 import { useList } from '../../List/context'
 import { Blocked } from '../../ListItem/Labels/Blocked'
diff --git a/packages/app/src/library/ValidatorList/index.tsx b/packages/app/src/library/ValidatorList/index.tsx
index d5c1b67e43..7c1679b2aa 100644
--- a/packages/app/src/library/ValidatorList/index.tsx
+++ b/packages/app/src/library/ValidatorList/index.tsx
@@ -14,7 +14,6 @@ import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { motion } from 'framer-motion'
 import { useNominationStatus } from 'hooks/useNominationStatus'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { FilterHeaderWrapper, List, Wrapper as ListWrapper } from 'library/List'
 import { validatorsPerPage } from 'library/List/defaults'
 import { MotionContainer } from 'library/List/MotionContainer'
@@ -25,6 +24,7 @@ import { ValidatorItem } from 'library/ValidatorList/ValidatorItem'
 import type { FormEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { useValidatorFilters } from '../../hooks/useValidatorFilters'
 import { ListProvider, useList } from '../List/context'
 import { FilterBadges } from './Filters/FilterBadges'
diff --git a/packages/app/src/library/WithdrawPrompt/index.tsx b/packages/app/src/library/WithdrawPrompt/index.tsx
index b861fa7dd0..117e1126ba 100644
--- a/packages/app/src/library/WithdrawPrompt/index.tsx
+++ b/packages/app/src/library/WithdrawPrompt/index.tsx
@@ -11,11 +11,11 @@ import { useTransferOptions } from 'contexts/TransferOptions'
 import { getUnixTime } from 'date-fns'
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import type { BondFor } from 'types'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ButtonRow, PageRow } from 'ui-structure'
 import { timeleftAsString } from 'utils'
 
diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
index bd1f2924e5..659cf92252 100644
--- a/packages/app/src/main.tsx
+++ b/packages/app/src/main.tsx
@@ -5,26 +5,23 @@ import { App } from 'App'
 import { createRoot } from 'react-dom/client'
 import { version } from '../package.json'
 
-// Network styles.
+// Network styles
 import 'styles/accents/kusama-relay.css'
 import 'styles/accents/polkadot-relay.css'
 import 'styles/accents/westend-relay.css'
 
-// App styles.
+// App styles
 import 'styles/fonts/font.scss'
 import 'styles/theme/index.scss'
 import 'styles/theme/theme.scss'
 
-// Library styles.
-import 'kits/Overlay/index.scss'
-
 const rootElement = document.getElementById('root')
 if (!rootElement) {
   throw new Error('Failed to find the root element')
 }
 
 // Refresh local storage language resources if in development, or if new app version is present.
-// This ensures all language keys are up to date.
+// This ensures all language keys are up to date
 if (
   localStorage.getItem('app_version') !== version ||
   import.meta.env.MODE === 'development'
diff --git a/packages/app/src/overlay/canvas/CreatePool/Summary/index.tsx b/packages/app/src/overlay/canvas/CreatePool/Summary/index.tsx
index ca00cd1aa7..fcea941e3f 100644
--- a/packages/app/src/overlay/canvas/CreatePool/Summary/index.tsx
+++ b/packages/app/src/overlay/canvas/CreatePool/Summary/index.tsx
@@ -14,13 +14,13 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useSetup } from 'contexts/Setup'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Warning } from 'library/Form/Warning'
 import { Header } from 'library/SetupSteps/Header'
 import { MotionContainer } from 'library/SetupSteps/MotionContainer'
 import type { SetupStepProps } from 'library/SetupSteps/types'
 import { SubmitTx } from 'library/SubmitTx'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { SummaryWrapper } from './Wrapper'
 
 export const Summary = ({ section }: SetupStepProps) => {
diff --git a/packages/app/src/overlay/canvas/CreatePool/index.tsx b/packages/app/src/overlay/canvas/CreatePool/index.tsx
index 139a6efa04..c56f3b9e97 100644
--- a/packages/app/src/overlay/canvas/CreatePool/index.tsx
+++ b/packages/app/src/overlay/canvas/CreatePool/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardWrapper } from 'library/Card/Wrappers'
 import { Nominate } from 'library/SetupSteps/Nominate'
 import { Bond } from 'overlay/canvas/CreatePool/Bond'
@@ -16,6 +15,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Element } from 'react-scroll'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 
 export const CreatePool = () => {
   const { t } = useTranslation()
diff --git a/packages/app/src/overlay/canvas/JoinPool/Header.tsx b/packages/app/src/overlay/canvas/JoinPool/Header.tsx
index 03dc801840..b2c349b3ed 100644
--- a/packages/app/src/overlay/canvas/JoinPool/Header.tsx
+++ b/packages/app/src/overlay/canvas/JoinPool/Header.tsx
@@ -9,10 +9,10 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Polkicon } from '@w3ux/react-polkicon'
 import { determinePoolDisplay } from 'contexts/Pools/util'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CanvasTitleWrapper } from 'overlay/canvas/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary, ButtonPrimaryInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { PageTitleTabs } from 'ui-structure'
 import type { JoinPoolHeaderProps } from './types'
 
diff --git a/packages/app/src/overlay/canvas/JoinPool/Overview/JoinForm.tsx b/packages/app/src/overlay/canvas/JoinPool/Overview/JoinForm.tsx
index 61f1a5981e..0339ccd6ac 100644
--- a/packages/app/src/overlay/canvas/JoinPool/Overview/JoinForm.tsx
+++ b/packages/app/src/overlay/canvas/JoinPool/Overview/JoinForm.tsx
@@ -15,12 +15,12 @@ import { useBatchCall } from 'hooks/useBatchCall'
 import { useBondGreatestFee } from 'hooks/useBondGreatestFee'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { BondFeedback } from 'library/Form/Bond/BondFeedback'
 import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'
 import { SubmitTx } from 'library/SubmitTx'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 import type { OverviewSectionProps } from '../types'
 import { JoinFormWrapper } from '../Wrappers'
diff --git a/packages/app/src/overlay/canvas/JoinPool/Preloader.tsx b/packages/app/src/overlay/canvas/JoinPool/Preloader.tsx
index 1d27ba652f..c5846eac6a 100644
--- a/packages/app/src/overlay/canvas/JoinPool/Preloader.tsx
+++ b/packages/app/src/overlay/canvas/JoinPool/Preloader.tsx
@@ -7,12 +7,12 @@ import BigNumber from 'bignumber.js'
 import { useApi } from 'contexts/Api'
 import { useNetwork } from 'contexts/Network'
 import { useBondedPools } from 'contexts/Pools/BondedPools'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { PoolSyncBar } from 'library/PoolSync/Bar'
 import { CanvasTitleWrapper } from 'overlay/canvas/Wrappers'
 import { useTranslation } from 'react-i18next'
 import type { BondedPool, PoolRewardPointsKey } from 'types'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 import { JoinPoolInterfaceWrapper } from './Wrappers'
 
diff --git a/packages/app/src/overlay/canvas/JoinPool/index.tsx b/packages/app/src/overlay/canvas/JoinPool/index.tsx
index 1eaa486a7e..bfdcc38160 100644
--- a/packages/app/src/overlay/canvas/JoinPool/index.tsx
+++ b/packages/app/src/overlay/canvas/JoinPool/index.tsx
@@ -6,9 +6,9 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useJoinPools } from 'contexts/Pools/JoinPools'
 import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'
 import { useStaking } from 'contexts/Staking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CanvasFullScreenWrapper } from 'overlay/canvas/Wrappers'
 import { useEffect, useMemo, useState } from 'react'
+import { useOverlay } from 'ui-overlay'
 import { Header } from './Header'
 import { Nominations } from './Nominations'
 import { Overview } from './Overview'
diff --git a/packages/app/src/overlay/canvas/ManageNominations/index.tsx b/packages/app/src/overlay/canvas/ManageNominations/index.tsx
index f2471cf70c..b461381f3f 100644
--- a/packages/app/src/overlay/canvas/ManageNominations/index.tsx
+++ b/packages/app/src/overlay/canvas/ManageNominations/index.tsx
@@ -14,7 +14,6 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { usePrompt } from 'contexts/Prompt'
 import { Notifications } from 'controllers/Notifications'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { GenerateNominations } from 'library/GenerateNominations'
 import type {
   NominationSelection,
@@ -25,6 +24,7 @@ import { Subheading } from 'pages/Nominate/Wrappers'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary, ButtonPrimaryInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { CanvasFullScreenWrapper, CanvasSubmitTxFooter } from '../Wrappers'
 import { RevertPrompt } from './Prompts/RevertPrompt'
 
diff --git a/packages/app/src/overlay/canvas/NominatorSetup/Summary/index.tsx b/packages/app/src/overlay/canvas/NominatorSetup/Summary/index.tsx
index 8ec91e6c5b..ef3b3aab4f 100644
--- a/packages/app/src/overlay/canvas/NominatorSetup/Summary/index.tsx
+++ b/packages/app/src/overlay/canvas/NominatorSetup/Summary/index.tsx
@@ -13,13 +13,13 @@ import { useSetup } from 'contexts/Setup'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { usePayeeConfig } from 'hooks/usePayeeConfig'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Warning } from 'library/Form/Warning'
 import { Header } from 'library/SetupSteps/Header'
 import { MotionContainer } from 'library/SetupSteps/MotionContainer'
 import type { SetupStepProps } from 'library/SetupSteps/types'
 import { SubmitTx } from 'library/SubmitTx'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { SummaryWrapper } from './Wrapper'
 
 export const Summary = ({ section }: SetupStepProps) => {
diff --git a/packages/app/src/overlay/canvas/NominatorSetup/index.tsx b/packages/app/src/overlay/canvas/NominatorSetup/index.tsx
index 369d7a4553..5789e578e5 100644
--- a/packages/app/src/overlay/canvas/NominatorSetup/index.tsx
+++ b/packages/app/src/overlay/canvas/NominatorSetup/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardWrapper } from 'library/Card/Wrappers'
 import { Nominate } from 'library/SetupSteps/Nominate'
 import { Bond } from 'overlay/canvas/NominatorSetup/Bond'
@@ -15,6 +14,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Element } from 'react-scroll'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 
 export const NominatorSetup = () => {
   const { t } = useTranslation('pages')
diff --git a/packages/app/src/overlay/canvas/PoolMembers/Prompts/UnbondMember.tsx b/packages/app/src/overlay/canvas/PoolMembers/Prompts/UnbondMember.tsx
index d02d5da5c0..f8f5de20f5 100644
--- a/packages/app/src/overlay/canvas/PoolMembers/Prompts/UnbondMember.tsx
+++ b/packages/app/src/overlay/canvas/PoolMembers/Prompts/UnbondMember.tsx
@@ -14,15 +14,13 @@ import { getUnixTime } from 'date-fns'
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { Warning } from 'library/Form/Warning'
 import { Title } from 'library/Prompt/Title'
 import { SubmitTx } from 'library/SubmitTx'
 import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ModalNotes, ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 
 export const UnbondMember = ({
@@ -88,7 +86,7 @@ export const UnbondMember = ({
       <Title title={t('unbondPoolMember')} />
       <ModalPadding>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/canvas/PoolMembers/Prompts/WithdrawMember.tsx b/packages/app/src/overlay/canvas/PoolMembers/Prompts/WithdrawMember.tsx
index 38ceb34f87..1da3c8dce9 100644
--- a/packages/app/src/overlay/canvas/PoolMembers/Prompts/WithdrawMember.tsx
+++ b/packages/app/src/overlay/canvas/PoolMembers/Prompts/WithdrawMember.tsx
@@ -13,15 +13,13 @@ import type { PoolMembership } from 'contexts/Pools/types'
 import { usePrompt } from 'contexts/Prompt'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { Warning } from 'library/Form/Warning'
 import { Title } from 'library/Prompt/Title'
 import { SubmitTx } from 'library/SubmitTx'
 import type { RefObject } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ModalNotes, ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 
 export const WithdrawMember = ({
@@ -99,7 +97,7 @@ export const WithdrawMember = ({
       <Title title={t('withdrawPoolMember')} />
       <ModalPadding>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/canvas/PoolMembers/index.tsx b/packages/app/src/overlay/canvas/PoolMembers/index.tsx
index 4eefeecbda..b184a44d9d 100644
--- a/packages/app/src/overlay/canvas/PoolMembers/index.tsx
+++ b/packages/app/src/overlay/canvas/PoolMembers/index.tsx
@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Members } from 'overlay/canvas/PoolMembers/Members'
 import { CanvasFullScreenWrapper } from 'overlay/canvas/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 
 export const PoolMembers = () => {
   const { t } = useTranslation()
diff --git a/packages/app/src/overlay/index.tsx b/packages/app/src/overlay/index.tsx
index f884fd138e..e632127f3c 100644
--- a/packages/app/src/overlay/index.tsx
+++ b/packages/app/src/overlay/index.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { useHelp } from 'contexts/Help'
-import { Overlay } from 'kits/Overlay'
 import { ErrorFallbackModal } from 'library/ErrorBoundary'
+import { Overlay } from 'ui-overlay'
 import { CreatePool } from './canvas/CreatePool'
 import { JoinPool } from './canvas/JoinPool'
 import { ManageNominations } from './canvas/ManageNominations'
diff --git a/packages/app/src/overlay/modals/Accounts/Account.tsx b/packages/app/src/overlay/modals/Accounts/Account.tsx
index 1807adbc81..01f18e5883 100644
--- a/packages/app/src/overlay/modals/Accounts/Account.tsx
+++ b/packages/app/src/overlay/modals/Accounts/Account.tsx
@@ -13,8 +13,8 @@ import BigNumber from 'bignumber.js'
 import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useNetwork } from 'contexts/Network'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 import { AccountWrapper } from './Wrappers'
 import type { AccountItemProps } from './types'
diff --git a/packages/app/src/overlay/modals/Accounts/index.tsx b/packages/app/src/overlay/modals/Accounts/index.tsx
index 5e54e22a3b..e3ee6596f5 100644
--- a/packages/app/src/overlay/modals/Accounts/index.tsx
+++ b/packages/app/src/overlay/modals/Accounts/index.tsx
@@ -9,14 +9,13 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useProxies } from 'contexts/Proxies'
 import { useTransferOptions } from 'contexts/TransferOptions'
 import { useActiveBalances } from 'hooks/useActiveBalances'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalCustomHeader } from 'kits/Overlay/structure/ModalCustomHeader'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { ActionItem } from 'library/ActionItem'
 import { Fragment, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { MaybeAddress } from 'types'
 import { ButtonPrimaryInvert, ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalCustomHeader, ModalPadding } from 'ui-overlay/structure'
 import { AccountButton } from './Account'
 import { Delegates } from './Delegates'
 import { AccountSeparator, AccountWrapper } from './Wrappers'
@@ -167,7 +166,7 @@ export const Accounts = () => {
   return (
     <ModalPadding>
       <ModalCustomHeader>
-        <div className="first">
+        <div>
           <h1>{t('accounts')}</h1>
           <ButtonPrimaryInvert
             text={t('goToConnect')}
diff --git a/packages/app/src/overlay/modals/BalanceTest/index.tsx b/packages/app/src/overlay/modals/BalanceTest/index.tsx
index 6322708af9..dd77f4c918 100644
--- a/packages/app/src/overlay/modals/BalanceTest/index.tsx
+++ b/packages/app/src/overlay/modals/BalanceTest/index.tsx
@@ -7,10 +7,10 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useNetwork } from 'contexts/Network'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalTitle } from 'ui-overlay/structure'
 
 export const BalanceTest = () => {
   const {
@@ -56,7 +56,7 @@ export const BalanceTest = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">Balance Test</h2>
+        <ModalTitle>Balance Test</ModalTitle>
       </ModalPadding>
       <SubmitTx valid {...submitExtrinsic} />
     </>
diff --git a/packages/app/src/overlay/modals/Bio/index.tsx b/packages/app/src/overlay/modals/Bio/index.tsx
index b50d9042f0..b523c404fc 100644
--- a/packages/app/src/overlay/modals/Bio/index.tsx
+++ b/packages/app/src/overlay/modals/Bio/index.tsx
@@ -1,9 +1,9 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding } from 'ui-overlay/structure'
 import { Wrapper } from './Wrapper'
 
 export const Bio = () => {
diff --git a/packages/app/src/overlay/modals/Bond/index.tsx b/packages/app/src/overlay/modals/Bond/index.tsx
index da7ba3aa59..324951a51c 100644
--- a/packages/app/src/overlay/modals/Bond/index.tsx
+++ b/packages/app/src/overlay/modals/Bond/index.tsx
@@ -12,15 +12,14 @@ import { useTransferOptions } from 'contexts/TransferOptions'
 import { useBondGreatestFee } from 'hooks/useBondGreatestFee'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { BondFeedback } from 'library/Form/Bond/BondFeedback'
 import { Warning } from 'library/Form/Warning'
 import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 
 export const Bond = () => {
@@ -148,9 +147,9 @@ export const Bond = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">{t('addToBond')}</h2>
+        <ModalTitle>{t('addToBond')}</ModalTitle>
         {pendingRewards > 0n && bondFor === 'pool' ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             <Warning
               text={`${t('bondingWithdraw')} ${pendingRewardsUnit} ${unit}.`}
             />
diff --git a/packages/app/src/overlay/modals/ChangePoolRoles/index.tsx b/packages/app/src/overlay/modals/ChangePoolRoles/index.tsx
index 1491e8ded3..1cfcfd1df0 100644
--- a/packages/app/src/overlay/modals/ChangePoolRoles/index.tsx
+++ b/packages/app/src/overlay/modals/ChangePoolRoles/index.tsx
@@ -6,11 +6,11 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useNetwork } from 'contexts/Network'
 import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalTitle } from 'ui-overlay/structure'
 import { RoleChange } from './RoleChange'
 import { Wrapper } from './Wrapper'
 
@@ -49,7 +49,7 @@ export const ChangePoolRoles = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">{t('changePoolRoles')}</h2>
+        <ModalTitle>{t('changePoolRoles')}</ModalTitle>
         <Wrapper>
           <RoleChange
             roleName={t('root')}
diff --git a/packages/app/src/overlay/modals/ChooseLanguage/index.tsx b/packages/app/src/overlay/modals/ChooseLanguage/index.tsx
index 9118b13241..f70a6fdf4f 100644
--- a/packages/app/src/overlay/modals/ChooseLanguage/index.tsx
+++ b/packages/app/src/overlay/modals/ChooseLanguage/index.tsx
@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import LanguageSVG from 'assets/svg/language.svg?react'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { changeLanguage, locales } from 'locales'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding } from 'ui-overlay/structure'
 import { ContentWrapper, LocaleButton } from './Wrapper'
 
 export const ChooseLanguage = () => {
diff --git a/packages/app/src/overlay/modals/ClaimPayouts/Forms.tsx b/packages/app/src/overlay/modals/ClaimPayouts/Forms.tsx
index 5e7d5b80db..f5d5010d8b 100644
--- a/packages/app/src/overlay/modals/ClaimPayouts/Forms.tsx
+++ b/packages/app/src/overlay/modals/ClaimPayouts/Forms.tsx
@@ -12,9 +12,6 @@ import { usePayouts } from 'contexts/Payouts'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
@@ -22,6 +19,8 @@ import type { ForwardedRef } from 'react'
 import { forwardRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import type { ActivePayout, FormProps } from './types'
 import { ContentWrapper } from './Wrappers'
 
@@ -139,7 +138,7 @@ export const Forms = forwardRef(
         <div ref={ref}>
           <ModalPadding horizontalOnly>
             {warnings.length > 0 ? (
-              <ModalWarnings withMargin>
+              <ModalWarnings>
                 {warnings.map((text, i) => (
                   <Warning key={`warning${i}`} text={text} />
                 ))}
diff --git a/packages/app/src/overlay/modals/ClaimPayouts/Overview.tsx b/packages/app/src/overlay/modals/ClaimPayouts/Overview.tsx
index 8bdfb2ec3f..945cd09e10 100644
--- a/packages/app/src/overlay/modals/ClaimPayouts/Overview.tsx
+++ b/packages/app/src/overlay/modals/ClaimPayouts/Overview.tsx
@@ -3,11 +3,10 @@
 
 import BigNumber from 'bignumber.js'
 import { usePayouts } from 'contexts/Payouts'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import type { Ref } from 'react'
 import { Fragment, forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ModalNotes, ModalPadding } from 'ui-overlay/structure'
 import { Item } from './Item'
 import type { OverviewProps } from './types'
 import { ContentWrapper } from './Wrappers'
diff --git a/packages/app/src/overlay/modals/ClaimPayouts/index.tsx b/packages/app/src/overlay/modals/ClaimPayouts/index.tsx
index fd2b2eae42..7c01e4735e 100644
--- a/packages/app/src/overlay/modals/ClaimPayouts/index.tsx
+++ b/packages/app/src/overlay/modals/ClaimPayouts/index.tsx
@@ -3,13 +3,16 @@
 
 import { setStateWithRef } from '@w3ux/utils'
 import { usePayouts } from 'contexts/Payouts'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'
-import { ModalMotionTwoSection } from 'kits/Overlay/structure/ModalMotionTwoSection'
-import { ModalSection } from 'kits/Overlay/structure/ModalSection'
 import { Title } from 'library/Modal/Title'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import {
+  ModalFixedTitle,
+  ModalMulti,
+  ModalMultiTwo,
+  ModalSection,
+} from 'ui-overlay/structure'
 import { Forms } from './Forms'
 import { Overview } from './Overview'
 import type { ActivePayout } from './types'
@@ -69,7 +72,7 @@ export const ClaimPayouts = () => {
       <ModalFixedTitle ref={headerRef}>
         <Title title={t('claimPayouts')} fixed />
       </ModalFixedTitle>
-      <ModalMotionTwoSection
+      <ModalMultiTwo
         style={{
           maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0),
         }}
@@ -88,14 +91,14 @@ export const ClaimPayouts = () => {
           },
         }}
       >
-        <div className="section">
+        <ModalMulti>
           <Overview
             setSection={setSection}
             setPayouts={setPayouts}
             ref={overviewRef}
           />
-        </div>
-        <div className="section">
+        </ModalMulti>
+        <ModalMulti>
           <Forms
             ref={formsRef}
             payouts={payouts}
@@ -103,8 +106,8 @@ export const ClaimPayouts = () => {
             setSection={setSection}
             onResize={onResize}
           />
-        </div>
-      </ModalMotionTwoSection>
+        </ModalMulti>
+      </ModalMultiTwo>
     </ModalSection>
   )
 }
diff --git a/packages/app/src/overlay/modals/ClaimReward/index.tsx b/packages/app/src/overlay/modals/ClaimReward/index.tsx
index 0b87935a81..95656677a0 100644
--- a/packages/app/src/overlay/modals/ClaimReward/index.tsx
+++ b/packages/app/src/overlay/modals/ClaimReward/index.tsx
@@ -9,15 +9,14 @@ import { useNetwork } from 'contexts/Network'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-overlay/structure'
 
 export const ClaimReward = () => {
   const { t } = useTranslation('modals')
@@ -85,11 +84,11 @@ export const ClaimReward = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">
+        <ModalTitle>
           {claimType === 'bond' ? t('compound') : t('withdraw')} {t('rewards')}
-        </h2>
+        </ModalTitle>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/Connect/Extension.tsx b/packages/app/src/overlay/modals/Connect/Extension.tsx
index 99dc21933c..5b1078e4d1 100644
--- a/packages/app/src/overlay/modals/Connect/Extension.tsx
+++ b/packages/app/src/overlay/modals/Connect/Extension.tsx
@@ -11,10 +11,9 @@ import { ExtensionIcons } from '@w3ux/extension-assets/util'
 import { useExtensionAccounts, useExtensions } from '@w3ux/react-connect-kit'
 import { localStorageOrDefault } from '@w3ux/utils'
 import { Notifications } from 'controllers/Notifications'
-import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ExtensionInner } from './Wrappers'
+import { ConnectItem, ExtensionInner } from './Wrappers'
 import type { ExtensionProps } from './types'
 
 export const Extension = ({ meta, size, flag }: ExtensionProps) => {
@@ -98,7 +97,7 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
   const disabled = !isInstalled
 
   return (
-    <ModalConnectItem canConnect={canConnect}>
+    <ConnectItem className={canConnect ? 'can-connect' : ''}>
       <ExtensionInner>
         <div>
           <div className="body">
@@ -137,6 +136,6 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
           </div>
         </div>
       </ExtensionInner>
-    </ModalConnectItem>
+    </ConnectItem>
   )
 }
diff --git a/packages/app/src/overlay/modals/Connect/Ledger.tsx b/packages/app/src/overlay/modals/Connect/Ledger.tsx
index 714dc212d3..d0aea88dcd 100644
--- a/packages/app/src/overlay/modals/Connect/Ledger.tsx
+++ b/packages/app/src/overlay/modals/Connect/Ledger.tsx
@@ -8,10 +8,9 @@ import LedgerLogoSVG from '@w3ux/extension-assets/Ledger.svg?react'
 import { inChrome } from '@w3ux/utils'
 import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'
-import { ModalHardwareItem } from 'kits/Overlay/structure/ModalHardwareItem'
 import { ButtonHelp, ButtonPrimaryInvert, ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ConnectItem, HardwareItem } from './Wrappers'
 
 export const Ledger = () => {
   const { openHelp } = useHelp()
@@ -25,8 +24,8 @@ export const Ledger = () => {
   }
 
   return (
-    <ModalConnectItem>
-      <ModalHardwareItem>
+    <ConnectItem>
+      <HardwareItem>
         <div className="body">
           <div className="status">
             <ButtonHelp onClick={() => openHelp('Ledger Hardware Wallets')} />
@@ -63,7 +62,7 @@ export const Ledger = () => {
             <FontAwesomeIcon icon={faExternalLinkAlt} transform="shrink-6" />
           </a>
         </div>
-      </ModalHardwareItem>
-    </ModalConnectItem>
+      </HardwareItem>
+    </ConnectItem>
   )
 }
diff --git a/packages/app/src/overlay/modals/Connect/ReadOnly.tsx b/packages/app/src/overlay/modals/Connect/ReadOnly.tsx
index b2b134747a..c47b2b7a51 100644
--- a/packages/app/src/overlay/modals/Connect/ReadOnly.tsx
+++ b/packages/app/src/overlay/modals/Connect/ReadOnly.tsx
@@ -13,10 +13,10 @@ import { useExternalAccounts } from 'contexts/Connect/ExternalAccounts'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'
 import { useHelp } from 'contexts/Help'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { AccountInput } from 'library/AccountInput'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonMonoInvert, ButtonSecondary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import {
   ActionWithButton,
   ManualAccount,
diff --git a/packages/app/src/overlay/modals/Connect/Vault.tsx b/packages/app/src/overlay/modals/Connect/Vault.tsx
index 088f08cf36..2c4a87f9e9 100644
--- a/packages/app/src/overlay/modals/Connect/Vault.tsx
+++ b/packages/app/src/overlay/modals/Connect/Vault.tsx
@@ -5,12 +5,11 @@ import { faExternalLinkAlt, faQrcode } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import PolkadotVaultSVG from '@w3ux/extension-assets/PolkadotVault.svg?react'
 import { useHelp } from 'contexts/Help'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'
-import { ModalHardwareItem } from 'kits/Overlay/structure/ModalHardwareItem'
 import type { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimaryInvert, ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ConnectItem, HardwareItem } from './Wrappers'
 
 export const Vault = (): ReactElement => {
   const { t } = useTranslation('modals')
@@ -19,8 +18,8 @@ export const Vault = (): ReactElement => {
   const url = 'signer.parity.io'
 
   return (
-    <ModalConnectItem>
-      <ModalHardwareItem>
+    <ConnectItem>
+      <HardwareItem>
         <div className="body">
           <div className="status">
             <ButtonHelp onClick={() => openHelp('Polkadot Vault')} />
@@ -62,7 +61,7 @@ export const Vault = (): ReactElement => {
             <FontAwesomeIcon icon={faExternalLinkAlt} transform="shrink-6" />
           </a>
         </div>
-      </ModalHardwareItem>
-    </ModalConnectItem>
+      </HardwareItem>
+    </ConnectItem>
   )
 }
diff --git a/packages/app/src/overlay/modals/Connect/WalletConnect.tsx b/packages/app/src/overlay/modals/Connect/WalletConnect.tsx
index 44613e6ae7..e70b7b79cf 100644
--- a/packages/app/src/overlay/modals/Connect/WalletConnect.tsx
+++ b/packages/app/src/overlay/modals/Connect/WalletConnect.tsx
@@ -4,12 +4,11 @@
 import { faExternalLinkAlt, faLink } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import WalletConnectSVG from '@w3ux/extension-assets/WalletConnect.svg?react'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem'
-import { ModalHardwareItem } from 'kits/Overlay/structure/ModalHardwareItem'
 import type { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimaryInvert, ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ConnectItem, HardwareItem } from './Wrappers'
 
 export const WalletConnect = (): ReactElement => {
   const { t } = useTranslation('modals')
@@ -17,8 +16,8 @@ export const WalletConnect = (): ReactElement => {
   const url = 'reown.com'
 
   return (
-    <ModalConnectItem>
-      <ModalHardwareItem>
+    <ConnectItem>
+      <HardwareItem>
         <div className="body">
           <div className="row">
             <WalletConnectSVG className="logo" />
@@ -52,7 +51,7 @@ export const WalletConnect = (): ReactElement => {
             <FontAwesomeIcon icon={faExternalLinkAlt} transform="shrink-6" />
           </a>
         </div>
-      </ModalHardwareItem>
-    </ModalConnectItem>
+      </HardwareItem>
+    </ConnectItem>
   )
 }
diff --git a/packages/app/src/overlay/modals/Connect/Wrappers.ts b/packages/app/src/overlay/modals/Connect/Wrappers.ts
index 24b9debd02..3601c694f2 100644
--- a/packages/app/src/overlay/modals/Connect/Wrappers.ts
+++ b/packages/app/src/overlay/modals/Connect/Wrappers.ts
@@ -243,3 +243,82 @@ export const ManualAccount = styled.div`
     font-size: 1rem;
   }
 `
+
+export const ConnectItem = styled.div`
+  padding: 0.5rem;
+  flex-grow: 0;
+  width: 50%;
+
+  @media (max-width: 800px) {
+    width: 100%;
+  }
+
+  &.can-connect {
+    > .inner {
+      transition: transform 0.15s;
+
+      &:hover {
+        transform: scale(1.015);
+      }
+    }
+  }
+
+  .foot {
+    padding: 0.85rem;
+
+    .link {
+      color: var(--text-color-secondary);
+      transition: color 0.15s;
+
+      &:hover {
+        color: var(--accent-color-primary);
+      }
+
+      > svg {
+        margin-left: 0.35rem;
+        margin-top: 0.3rem;
+      }
+    }
+  }
+`
+
+export const HardwareItem = styled.div`
+  background: var(--button-primary-background);
+  border-radius: 1rem;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  .body {
+    padding: 0.5rem 0.85rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .row {
+      display: flex;
+      justify-content: center;
+
+      p {
+        margin-bottom: 0;
+      }
+
+      &.margin {
+        margin-top: 0.75rem;
+      }
+
+      .logo {
+        color: var(--text-color-secondary);
+        height: 3rem;
+        margin: 0.75rem 0.5rem 0.5rem;
+      }
+    }
+
+    .status {
+      position: absolute;
+      top: 0.9rem;
+      right: 0.9rem;
+    }
+  }
+`
diff --git a/packages/app/src/overlay/modals/Connect/index.tsx b/packages/app/src/overlay/modals/Connect/index.tsx
index 1d6850d46b..08b84f4890 100644
--- a/packages/app/src/overlay/modals/Connect/index.tsx
+++ b/packages/app/src/overlay/modals/Connect/index.tsx
@@ -7,18 +7,21 @@ import type { ExtensionArrayListItem } from '@w3ux/extension-assets/util'
 import { useEffectIgnoreInitial } from '@w3ux/hooks'
 import { useExtensions } from '@w3ux/react-connect-kit'
 import type { AnyFunction } from '@w3ux/types'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalCustomHeader } from 'kits/Overlay/structure/ModalCustomHeader'
-import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'
-import { ModalMotionThreeSection } from 'kits/Overlay/structure/ModalMotionThreeSection'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalSection } from 'kits/Overlay/structure/ModalSection'
 import { ActionItem } from 'library/ActionItem'
 import { Close } from 'library/Modal/Close'
 import { SelectItems } from 'library/SelectItems'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimaryInvert, ButtonTab } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import {
+  ModalCustomHeader,
+  ModalFixedTitle,
+  ModalMulti,
+  ModalMultiThree,
+  ModalPadding,
+  ModalSection,
+} from 'ui-overlay/structure'
 import { Extension } from './Extension'
 import { Ledger } from './Ledger'
 import { Proxies } from './Proxies'
@@ -156,7 +159,7 @@ export const Connect = () => {
       <Close />
       <ModalFixedTitle ref={headerRef} withStyle>
         <ModalCustomHeader>
-          <div className="first">
+          <div>
             <h1>{t('connect')}</h1>
             <ButtonPrimaryInvert
               text={t('goToAccounts')}
@@ -186,7 +189,7 @@ export const Connect = () => {
         </ModalCustomHeader>
       </ModalFixedTitle>
 
-      <ModalMotionThreeSection
+      <ModalMultiThree
         style={{
           maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0),
         }}
@@ -210,7 +213,7 @@ export const Connect = () => {
           },
         }}
       >
-        <div className="section">
+        <ModalMulti>
           <ModalPadding horizontalOnly ref={homeRef}>
             {ConnectCombinedJSX}
             {!inMobileWallet && (
@@ -231,18 +234,18 @@ export const Connect = () => {
               </>
             )}
           </ModalPadding>
-        </div>
-        <div className="section">
+        </ModalMulti>
+        <ModalMulti>
           <ModalPadding horizontalOnly ref={readOnlyRef}>
             <ReadOnly setInputOpen={setReadOnlyOpen} inputOpen={readOnlyOpen} />
           </ModalPadding>
-        </div>
-        <div className="section">
+        </ModalMulti>
+        <ModalMulti>
           <ModalPadding horizontalOnly ref={proxiesRef}>
             <Proxies setInputOpen={setNewProxyOpen} inputOpen={newProxyOpen} />
           </ModalPadding>
-        </div>
-      </ModalMotionThreeSection>
+        </ModalMulti>
+      </ModalMultiThree>
     </ModalSection>
   )
 }
diff --git a/packages/app/src/overlay/modals/DiscordSupport/index.tsx b/packages/app/src/overlay/modals/DiscordSupport/index.tsx
index e0963b37d7..be95d2f70c 100644
--- a/packages/app/src/overlay/modals/DiscordSupport/index.tsx
+++ b/packages/app/src/overlay/modals/DiscordSupport/index.tsx
@@ -5,9 +5,9 @@ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import DiscordOutlineSvg from 'assets/svg/discordOutline.svg?react'
 import { DiscordSupportUrl } from 'consts'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { useTranslation } from 'react-i18next'
+import { ModalPadding } from 'ui-overlay/structure'
 import { SupportWrapper } from './Wrapper'
 
 export const DiscordSupport = () => {
diff --git a/packages/app/src/overlay/modals/DismissTips/index.tsx b/packages/app/src/overlay/modals/DismissTips/index.tsx
index f6fd43352a..bb2dcd8805 100644
--- a/packages/app/src/overlay/modals/DismissTips/index.tsx
+++ b/packages/app/src/overlay/modals/DismissTips/index.tsx
@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { usePlugins } from 'contexts/Plugins'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmit } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding } from 'ui-overlay/structure'
+import { ButtonRow } from 'ui-structure'
 
 export const DismissTips = () => {
   const { t } = useTranslation('tips')
@@ -27,7 +28,7 @@ export const DismissTips = () => {
             <h4>{t('module.dismissResult')}</h4>
             <h4>{t('module.reEnable')}</h4>
           </div>
-          <div className="buttons">
+          <ButtonRow>
             <ButtonSubmit
               marginRight
               text={t('module.disableTips')}
@@ -36,7 +37,7 @@ export const DismissTips = () => {
                 setModalStatus('closing')
               }}
             />
-          </div>
+          </ButtonRow>
         </div>
       </ModalPadding>
     </>
diff --git a/packages/app/src/overlay/modals/ImportLedger/Manage.tsx b/packages/app/src/overlay/modals/ImportLedger/Manage.tsx
index b4df65840b..54837b3b73 100644
--- a/packages/app/src/overlay/modals/ImportLedger/Manage.tsx
+++ b/packages/app/src/overlay/modals/ImportLedger/Manage.tsx
@@ -9,10 +9,10 @@ import { useLedgerHardware } from 'contexts/LedgerHardware'
 import { getLedgerApp } from 'contexts/LedgerHardware/Utils'
 import { useNetwork } from 'contexts/Network'
 import { usePrompt } from 'contexts/Prompt'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { HardwareStatusBar } from 'library/Hardware/HardwareStatusBar'
 import { Heading } from 'library/Import/Heading'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { Addresess } from './Addresses'
 import { Reset } from './Reset'
 
diff --git a/packages/app/src/overlay/modals/ImportLedger/Reset.tsx b/packages/app/src/overlay/modals/ImportLedger/Reset.tsx
index e5a5490925..c4929b0a57 100644
--- a/packages/app/src/overlay/modals/ImportLedger/Reset.tsx
+++ b/packages/app/src/overlay/modals/ImportLedger/Reset.tsx
@@ -9,10 +9,10 @@ import { getLocalLedgerAddresses } from 'contexts/LedgerHardware/Utils'
 import type { LedgerAddress } from 'contexts/LedgerHardware/types'
 import { useNetwork } from 'contexts/Network'
 import { usePrompt } from 'contexts/Prompt'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { ConfirmWrapper } from 'library/Import/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonMono, ButtonMonoInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 
 export const Reset = ({ removeLedgerAddress }: AnyJson) => {
   const { t } = useTranslation('modals')
diff --git a/packages/app/src/overlay/modals/ImportLedger/Splash.tsx b/packages/app/src/overlay/modals/ImportLedger/Splash.tsx
index 6e3dc0eeab..fcf67488d3 100644
--- a/packages/app/src/overlay/modals/ImportLedger/Splash.tsx
+++ b/packages/app/src/overlay/modals/ImportLedger/Splash.tsx
@@ -7,10 +7,10 @@ import type { AnyFunction } from '@w3ux/types'
 import { useHelp } from 'contexts/Help'
 import { useLedgerHardware } from 'contexts/LedgerHardware'
 import { useTheme } from 'contexts/Themes'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonSecondary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { SplashWrapper } from './Wrappers'
 
 export const Splash = ({ onGetAddress }: AnyFunction) => {
diff --git a/packages/app/src/overlay/modals/ImportLedger/index.tsx b/packages/app/src/overlay/modals/ImportLedger/index.tsx
index 6692ddaf3c..b47be63ae9 100644
--- a/packages/app/src/overlay/modals/ImportLedger/index.tsx
+++ b/packages/app/src/overlay/modals/ImportLedger/index.tsx
@@ -15,10 +15,10 @@ import type {
 } from 'contexts/LedgerHardware/types'
 import { useNetwork } from 'contexts/Network'
 import { Notifications } from 'controllers/Notifications'
-import { useOverlay } from 'kits/Overlay/Provider'
 import type { FC } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { Manage } from './Manage'
 import { Splash } from './Splash'
 
diff --git a/packages/app/src/overlay/modals/ImportVault/index.tsx b/packages/app/src/overlay/modals/ImportVault/index.tsx
index 864a0d1bf3..2c3142d04a 100644
--- a/packages/app/src/overlay/modals/ImportVault/index.tsx
+++ b/packages/app/src/overlay/modals/ImportVault/index.tsx
@@ -9,7 +9,6 @@ import type { AnyJson } from '@w3ux/types'
 import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'
 import { useNetwork } from 'contexts/Network'
 import { usePrompt } from 'contexts/Prompt'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { HardwareAddress } from 'library/Hardware/HardwareAddress'
 import { HardwareStatusBar } from 'library/Hardware/HardwareStatusBar'
 import { Confirm } from 'library/Import/Confirm'
@@ -20,6 +19,7 @@ import { AddressesWrapper } from 'library/Import/Wrappers'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary, ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { Reader } from './Reader'
 
 export const ImportVault = () => {
diff --git a/packages/app/src/overlay/modals/ImportWalletConnect/index.tsx b/packages/app/src/overlay/modals/ImportWalletConnect/index.tsx
index 456a5b80e0..09d6951a78 100644
--- a/packages/app/src/overlay/modals/ImportWalletConnect/index.tsx
+++ b/packages/app/src/overlay/modals/ImportWalletConnect/index.tsx
@@ -11,7 +11,6 @@ import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'
 import { useNetwork } from 'contexts/Network'
 import { usePrompt } from 'contexts/Prompt'
 import { useWalletConnect } from 'contexts/WalletConnect'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { HardwareAddress } from 'library/Hardware/HardwareAddress'
 import { HardwareStatusBar } from 'library/Hardware/HardwareStatusBar'
 import { Heading } from 'library/Import/Heading'
@@ -20,6 +19,7 @@ import { AddressesWrapper } from 'library/Import/Wrappers'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary, ButtonText } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 
 export const ImportWalletConnect = () => {
   const { t } = useTranslation()
diff --git a/packages/app/src/overlay/modals/LeavePool/index.tsx b/packages/app/src/overlay/modals/LeavePool/index.tsx
index f5f62fbf95..07c7aa765c 100644
--- a/packages/app/src/overlay/modals/LeavePool/index.tsx
+++ b/packages/app/src/overlay/modals/LeavePool/index.tsx
@@ -14,9 +14,6 @@ import { getUnixTime } from 'date-fns'
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
@@ -24,6 +21,8 @@ import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 
 export const LeavePool = ({
@@ -101,7 +100,7 @@ export const LeavePool = ({
     <>
       <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/MailSupport/index.tsx b/packages/app/src/overlay/modals/MailSupport/index.tsx
index dc62b543f3..dbc62da1a1 100644
--- a/packages/app/src/overlay/modals/MailSupport/index.tsx
+++ b/packages/app/src/overlay/modals/MailSupport/index.tsx
@@ -3,9 +3,9 @@
 
 import MailSVG from 'assets/svg/mail.svg?react'
 import { MailSupportAddress } from 'consts'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { useTranslation } from 'react-i18next'
+import { ModalPadding } from 'ui-overlay/structure'
 import { SupportWrapper } from './Wrapper'
 
 export const MailSupport = () => {
diff --git a/packages/app/src/overlay/modals/ManageFastUnstake/index.tsx b/packages/app/src/overlay/modals/ManageFastUnstake/index.tsx
index e30af8a600..bf947c7d44 100644
--- a/packages/app/src/overlay/modals/ManageFastUnstake/index.tsx
+++ b/packages/app/src/overlay/modals/ManageFastUnstake/index.tsx
@@ -14,16 +14,19 @@ import { useTxMeta } from 'contexts/TxMeta'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import {
+  ModalNotes,
+  ModalPadding,
+  ModalTitle,
+  ModalWarnings,
+} from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 
 export const ManageFastUnstake = () => {
@@ -144,11 +147,9 @@ export const ManageFastUnstake = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">
-          {t('fastUnstake', { context: 'title' })}
-        </h2>
+        <ModalTitle>{t('fastUnstake', { context: 'title' })}</ModalTitle>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning_${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/ManagePool/Forms/ClaimCommission/index.tsx b/packages/app/src/overlay/modals/ManagePool/Forms/ClaimCommission/index.tsx
index e310260dd4..0a1ef2fb49 100644
--- a/packages/app/src/overlay/modals/ManagePool/Forms/ClaimCommission/index.tsx
+++ b/packages/app/src/overlay/modals/ManagePool/Forms/ClaimCommission/index.tsx
@@ -10,10 +10,6 @@ import { useNetwork } from 'contexts/Network'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
@@ -21,6 +17,8 @@ import type { Dispatch, SetStateAction } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalNotes, ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 
 export const ClaimCommission = ({
@@ -78,7 +76,7 @@ export const ClaimCommission = ({
     <>
       <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/ManagePool/Forms/ManageCommission/index.tsx b/packages/app/src/overlay/modals/ManagePool/Forms/ManageCommission/index.tsx
index e667780b17..15196d2cf3 100644
--- a/packages/app/src/overlay/modals/ManagePool/Forms/ManageCommission/index.tsx
+++ b/packages/app/src/overlay/modals/ManagePool/Forms/ManageCommission/index.tsx
@@ -14,9 +14,6 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
@@ -24,6 +21,8 @@ import 'rc-slider/assets/index.css'
 import { useEffect, useState, type Dispatch, type SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import { ChangeRate } from './ChangeRate'
 import { CommissionCurrent } from './CommissionCurrent'
 import { MaxCommission } from './MaxCommission'
@@ -257,7 +256,7 @@ export const ManageCommission = ({
     <>
       <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/ManagePool/Forms/RenamePool/index.tsx b/packages/app/src/overlay/modals/ManagePool/Forms/RenamePool/index.tsx
index fe8f5dff79..832f3f97da 100644
--- a/packages/app/src/overlay/modals/ManagePool/Forms/RenamePool/index.tsx
+++ b/packages/app/src/overlay/modals/ManagePool/Forms/RenamePool/index.tsx
@@ -10,9 +10,6 @@ import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
 import { Binary } from 'polkadot-api'
@@ -20,6 +17,8 @@ import type { Dispatch, FormEvent, SetStateAction } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 
 export const RenamePool = ({
   setSection,
@@ -91,7 +90,7 @@ export const RenamePool = ({
     <>
       <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/ManagePool/Forms/SetClaimPermission/index.tsx b/packages/app/src/overlay/modals/ManagePool/Forms/SetClaimPermission/index.tsx
index 0703dfb807..c0648d1f06 100644
--- a/packages/app/src/overlay/modals/ManagePool/Forms/SetClaimPermission/index.tsx
+++ b/packages/app/src/overlay/modals/ManagePool/Forms/SetClaimPermission/index.tsx
@@ -11,9 +11,6 @@ import type { ClaimPermission } from 'contexts/Pools/types'
 import { defaultClaimPermission } from 'controllers/ActivePools/defaults'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
@@ -21,6 +18,8 @@ import type { Dispatch, SetStateAction } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 
 export const SetClaimPermission = ({
   setSection,
@@ -87,7 +86,7 @@ export const SetClaimPermission = ({
     <>
       <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/ManagePool/Forms/SetPoolState/index.tsx b/packages/app/src/overlay/modals/ManagePool/Forms/SetPoolState/index.tsx
index aee16d27de..1a7c63efdc 100644
--- a/packages/app/src/overlay/modals/ManagePool/Forms/SetPoolState/index.tsx
+++ b/packages/app/src/overlay/modals/ManagePool/Forms/SetPoolState/index.tsx
@@ -9,9 +9,6 @@ import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
@@ -19,6 +16,8 @@ import type { Dispatch, SetStateAction } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 
 export const SetPoolState = ({
   setSection,
@@ -139,7 +138,7 @@ export const SetPoolState = ({
     <>
       <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/ManagePool/index.tsx b/packages/app/src/overlay/modals/ManagePool/index.tsx
index 77757033a5..757f984fe3 100644
--- a/packages/app/src/overlay/modals/ManagePool/index.tsx
+++ b/packages/app/src/overlay/modals/ManagePool/index.tsx
@@ -3,14 +3,17 @@
 
 import { useLedgerHardware } from 'contexts/LedgerHardware'
 import { useActivePool } from 'contexts/Pools/ActivePool'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'
-import { ModalMotionTwoSection } from 'kits/Overlay/structure/ModalMotionTwoSection'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalSection } from 'kits/Overlay/structure/ModalSection'
 import { Title } from 'library/Modal/Title'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import {
+  ModalFixedTitle,
+  ModalMulti,
+  ModalMultiTwo,
+  ModalPadding,
+  ModalSection,
+} from 'ui-overlay/structure'
 import { Forms } from './Forms'
 import { Tasks } from './Tasks'
 
@@ -68,7 +71,7 @@ export const ManagePool = () => {
       <ModalFixedTitle ref={headerRef}>
         <Title title={`${t('managePool')}`} fixed />
       </ModalFixedTitle>
-      <ModalMotionTwoSection
+      <ModalMultiTwo
         style={{
           maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0),
         }}
@@ -87,13 +90,13 @@ export const ManagePool = () => {
           },
         }}
       >
-        <div className="section">
+        <ModalMulti>
           <ModalPadding horizontalOnly>
             <Tasks setSection={setSection} setTask={setTask} ref={tasksRef} />
           </ModalPadding>
-        </div>
+        </ModalMulti>
 
-        <div className="section">
+        <ModalMulti>
           <Forms
             onResize={onResize}
             setSection={setSection}
@@ -102,8 +105,8 @@ export const ManagePool = () => {
             ref={formsRef}
             incrementCalculateHeight={incrementCalculateHeight}
           />
-        </div>
-      </ModalMotionTwoSection>
+        </ModalMulti>
+      </ModalMultiTwo>
     </ModalSection>
   )
 }
diff --git a/packages/app/src/overlay/modals/Networks/index.tsx b/packages/app/src/overlay/modals/Networks/index.tsx
index 44000b5a7a..5ea145d598 100644
--- a/packages/app/src/overlay/modals/Networks/index.tsx
+++ b/packages/app/src/overlay/modals/Networks/index.tsx
@@ -11,12 +11,12 @@ import { useApi } from 'contexts/Api'
 import { useNetwork } from 'contexts/Network'
 import { usePrompt } from 'contexts/Prompt'
 import { useUi } from 'contexts/UI'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { useEffect } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ButtonTertiary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding } from 'ui-overlay/structure'
 import { ProvidersPrompt } from './ProvidersPrompt'
 import {
   BraveWarning,
diff --git a/packages/app/src/overlay/modals/Settings/index.tsx b/packages/app/src/overlay/modals/Settings/index.tsx
index 48323b8055..9fd1d6bfea 100644
--- a/packages/app/src/overlay/modals/Settings/index.tsx
+++ b/packages/app/src/overlay/modals/Settings/index.tsx
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { usePlugins } from 'contexts/Plugins'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { Title } from 'library/Modal/Title'
 import { StatusButton } from 'library/StatusButton'
 import { useTranslation } from 'react-i18next'
+import { ModalPadding } from 'ui-overlay/structure'
 import { ContentWrapper } from '../Networks/Wrapper'
 
 export const Settings = () => {
diff --git a/packages/app/src/overlay/modals/StopNominations/index.tsx b/packages/app/src/overlay/modals/StopNominations/index.tsx
index 6ec08780b2..9468d7dd3f 100644
--- a/packages/app/src/overlay/modals/StopNominations/index.tsx
+++ b/packages/app/src/overlay/modals/StopNominations/index.tsx
@@ -10,15 +10,13 @@ import { useNetwork } from 'contexts/Network'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalSeparator } from 'kits/Overlay/structure/ModalSeparator'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { Warning } from 'library/Form/Warning'
 import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-overlay/structure'
 
 export const StopNominations = () => {
   const { t } = useTranslation('modals')
@@ -97,10 +95,9 @@ export const StopNominations = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">
+        <ModalTitle>
           {t('stop')} {t('allNominations')}
-        </h2>
-        <ModalSeparator />
+        </ModalTitle>
         {warnings.length ? (
           <ModalWarnings>
             {warnings.map((text, i) => (
diff --git a/packages/app/src/overlay/modals/Unbond/index.tsx b/packages/app/src/overlay/modals/Unbond/index.tsx
index 7aa1fe7b9a..5153ca5cde 100644
--- a/packages/app/src/overlay/modals/Unbond/index.tsx
+++ b/packages/app/src/overlay/modals/Unbond/index.tsx
@@ -18,10 +18,6 @@ import { getUnixTime } from 'date-fns'
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { UnbondFeedback } from 'library/Form/Unbond/UnbondFeedback'
 import { Warning } from 'library/Form/Warning'
 import { Close } from 'library/Modal/Close'
@@ -29,6 +25,13 @@ import { SubmitTx } from 'library/SubmitTx'
 import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import {
+  ModalNotes,
+  ModalPadding,
+  ModalTitle,
+  ModalWarnings,
+} from 'ui-overlay/structure'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 
 export const Unbond = () => {
@@ -196,9 +199,9 @@ export const Unbond = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">{t('removeBond')}</h2>
+        <ModalTitle>{t('removeBond')}</ModalTitle>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/UnlockChunks/Forms.tsx b/packages/app/src/overlay/modals/UnlockChunks/Forms.tsx
index 45b34e34ac..6fc2e9b13f 100644
--- a/packages/app/src/overlay/modals/UnlockChunks/Forms.tsx
+++ b/packages/app/src/overlay/modals/UnlockChunks/Forms.tsx
@@ -18,15 +18,14 @@ import { useFavoritePools } from 'contexts/Pools/FavoritePools'
 import { usePoolMembers } from 'contexts/Pools/PoolMembers'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { SubmitTx } from 'library/SubmitTx'
 import { forwardRef, useEffect, useState, type ForwardedRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonSubmitInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 import type { FormsProps } from './types'
 import { ContentWrapper } from './Wrappers'
@@ -147,7 +146,7 @@ export const Forms = forwardRef(
         <div ref={ref}>
           <ModalPadding horizontalOnly>
             {warnings.length > 0 ? (
-              <ModalWarnings withMargin>
+              <ModalWarnings>
                 {warnings.map((text, i) => (
                   <Warning key={`warning${i}`} text={text} />
                 ))}
diff --git a/packages/app/src/overlay/modals/UnlockChunks/Overview.tsx b/packages/app/src/overlay/modals/UnlockChunks/Overview.tsx
index 01e004d940..6478111905 100644
--- a/packages/app/src/overlay/modals/UnlockChunks/Overview.tsx
+++ b/packages/app/src/overlay/modals/UnlockChunks/Overview.tsx
@@ -10,8 +10,6 @@ import { useNetwork } from 'contexts/Network'
 import { getUnixTime } from 'date-fns'
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { ModalNotes } from 'kits/Overlay/structure/ModalNotes'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { StatWrapper, StatsWrapper } from 'library/Modal/Wrappers'
 import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import type { Dispatch, ForwardedRef, SetStateAction } from 'react'
@@ -19,6 +17,7 @@ import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BondFor } from 'types'
 import { ButtonSubmit } from 'ui-buttons'
+import { ModalNotes, ModalPadding } from 'ui-overlay/structure'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 import { Chunk } from './Chunk'
 import { ContentWrapper } from './Wrappers'
diff --git a/packages/app/src/overlay/modals/UnlockChunks/index.tsx b/packages/app/src/overlay/modals/UnlockChunks/index.tsx
index d60066624c..9d45c1aab0 100644
--- a/packages/app/src/overlay/modals/UnlockChunks/index.tsx
+++ b/packages/app/src/overlay/modals/UnlockChunks/index.tsx
@@ -7,13 +7,16 @@ import { useBalances } from 'contexts/Balances'
 import type { UnlockChunk } from 'contexts/Balances/types'
 import { useLedgerHardware } from 'contexts/LedgerHardware'
 import { useActivePool } from 'contexts/Pools/ActivePool'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalFixedTitle } from 'kits/Overlay/structure/ModalFixedTitle'
-import { ModalMotionTwoSection } from 'kits/Overlay/structure/ModalMotionTwoSection'
-import { ModalSection } from 'kits/Overlay/structure/ModalSection'
 import { Title } from 'library/Modal/Title'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import {
+  ModalFixedTitle,
+  ModalMulti,
+  ModalMultiTwo,
+  ModalSection,
+} from 'ui-overlay/structure'
 import { Forms } from './Forms'
 import { Overview } from './Overview'
 
@@ -103,7 +106,7 @@ export const UnlockChunks = () => {
       <ModalFixedTitle ref={headerRef}>
         <Title title={t('unlocks')} fixed />
       </ModalFixedTitle>
-      <ModalMotionTwoSection
+      <ModalMultiTwo
         style={{
           maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0),
         }}
@@ -122,7 +125,7 @@ export const UnlockChunks = () => {
           },
         }}
       >
-        <div className="section">
+        <ModalMulti>
           <Overview
             unlocking={unlocking}
             bondFor={bondFor}
@@ -131,8 +134,8 @@ export const UnlockChunks = () => {
             setTask={setTask}
             ref={overviewRef}
           />
-        </div>
-        <div className="section">
+        </ModalMulti>
+        <ModalMulti>
           <Forms
             incrementCalculateHeight={incrementCalculateHeight}
             setSection={setSection}
@@ -141,8 +144,8 @@ export const UnlockChunks = () => {
             ref={formsRef}
             onResize={onResize}
           />
-        </div>
-      </ModalMotionTwoSection>
+        </ModalMulti>
+      </ModalMultiTwo>
     </ModalSection>
   )
 }
diff --git a/packages/app/src/overlay/modals/Unstake/index.tsx b/packages/app/src/overlay/modals/Unstake/index.tsx
index d4b0a1e0f7..e7516c6450 100644
--- a/packages/app/src/overlay/modals/Unstake/index.tsx
+++ b/packages/app/src/overlay/modals/Unstake/index.tsx
@@ -15,9 +15,6 @@ import { useBatchCall } from 'hooks/useBatchCall'
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
 import { Close } from 'library/Modal/Close'
@@ -25,6 +22,8 @@ import { SubmitTx } from 'library/SubmitTx'
 import { StaticNote } from 'overlay/modals/Utils/StaticNote'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-overlay/structure'
 import { planckToUnitBn, timeleftAsString } from 'utils'
 
 export const Unstake = () => {
@@ -114,9 +113,9 @@ export const Unstake = () => {
     <>
       <Close />
       <ModalPadding>
-        <h2 className="title unbounded">{t('unstake')} </h2>
+        <ModalTitle>{t('unstake')} </ModalTitle>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/UpdatePayee/index.tsx b/packages/app/src/overlay/modals/UpdatePayee/index.tsx
index 5924626996..44923563c4 100644
--- a/packages/app/src/overlay/modals/UpdatePayee/index.tsx
+++ b/packages/app/src/overlay/modals/UpdatePayee/index.tsx
@@ -11,9 +11,6 @@ import type { PayeeConfig, PayeeOptions } from 'contexts/Setup/types'
 import { usePayeeConfig } from 'hooks/usePayeeConfig'
 import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
-import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings'
 import { Warning } from 'library/Form/Warning'
 import { Title } from 'library/Modal/Title'
 import { PayeeInput } from 'library/PayeeInput'
@@ -23,6 +20,8 @@ import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { MaybeAddress } from 'types'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding, ModalWarnings } from 'ui-overlay/structure'
 
 export const UpdatePayee = () => {
   const { t } = useTranslation('modals')
@@ -130,9 +129,9 @@ export const UpdatePayee = () => {
         title={t('updatePayoutDestination')}
         helpKey="Payout Destination"
       />
-      <ModalPadding style={{ paddingBottom: 0 }}>
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
-          <ModalWarnings withMargin>
+          <ModalWarnings>
             {warnings.map((text, i) => (
               <Warning key={`warning${i}`} text={text} />
             ))}
diff --git a/packages/app/src/overlay/modals/UpdateReserve/index.tsx b/packages/app/src/overlay/modals/UpdateReserve/index.tsx
index 12108e815b..714b957b1c 100644
--- a/packages/app/src/overlay/modals/UpdateReserve/index.tsx
+++ b/packages/app/src/overlay/modals/UpdateReserve/index.tsx
@@ -10,8 +10,6 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useTransferOptions } from 'contexts/TransferOptions'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { Close } from 'library/Modal/Close'
 import { Title } from 'library/Modal/Title'
@@ -21,6 +19,8 @@ import 'rc-slider/assets/index.css'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimaryInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalPadding } from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 
 export const UpdateReserve = () => {
diff --git a/packages/app/src/overlay/modals/ValidatorGeo/index.tsx b/packages/app/src/overlay/modals/ValidatorGeo/index.tsx
index 719b69b1ef..37811b701e 100644
--- a/packages/app/src/overlay/modals/ValidatorGeo/index.tsx
+++ b/packages/app/src/overlay/modals/ValidatorGeo/index.tsx
@@ -10,7 +10,6 @@ import { useNetwork } from 'contexts/Network'
 import { usePlugins } from 'contexts/Plugins'
 import { useUi } from 'contexts/UI'
 import { PolkaWatch } from 'controllers/PolkaWatch'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
 import { GeoDonut } from 'library/Graphs/GeoDonut'
 import { formatSize } from 'library/Graphs/Utils'
@@ -21,6 +20,8 @@ import { StatusLabel } from 'library/StatusLabel'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalAddressHeader } from 'ui-overlay/structure'
 
 export const ValidatorGeo = () => {
   const { t } = useTranslation('modals')
@@ -70,16 +71,15 @@ export const ValidatorGeo = () => {
   return (
     <>
       <Title title={t('validatorDecentralization')} />
-      <div className="header">
+      <ModalAddressHeader>
         <Polkicon address={address} fontSize="2.75rem" />
         <h2>
           &nbsp;&nbsp;
           {identity === null ? ellipsisFn(address) : identity}
         </h2>
-      </div>
+      </ModalAddressHeader>
       <div
-        className="body"
-        style={{ position: 'relative', marginTop: '0.5rem' }}
+        style={{ position: 'relative', marginTop: '0.5rem', padding: '1rem' }}
       >
         <PluginLabel plugin="polkawatch" />
         <CardWrapper
diff --git a/packages/app/src/overlay/modals/ValidatorMetrics/index.tsx b/packages/app/src/overlay/modals/ValidatorMetrics/index.tsx
index 785ae920f1..fc0fb8e67b 100644
--- a/packages/app/src/overlay/modals/ValidatorMetrics/index.tsx
+++ b/packages/app/src/overlay/modals/ValidatorMetrics/index.tsx
@@ -13,8 +13,6 @@ import { usePlugins } from 'contexts/Plugins'
 import { useStaking } from 'contexts/Staking'
 import { useUi } from 'contexts/UI'
 import { Subscan } from 'controllers/Subscan'
-import { useOverlay } from 'kits/Overlay/Provider'
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'
 import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
 import { EraPoints as EraPointsGraph } from 'library/Graphs/EraPoints'
 import { formatSize } from 'library/Graphs/Utils'
@@ -26,6 +24,8 @@ import { StatusLabel } from 'library/StatusLabel'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
+import { ModalAddressHeader, ModalPadding } from 'ui-overlay/structure'
 import { planckToUnitBn } from 'utils'
 
 export const ValidatorMetrics = () => {
@@ -94,13 +94,13 @@ export const ValidatorMetrics = () => {
   return (
     <>
       <Title title={t('validatorMetrics')} />
-      <div className="header">
+      <ModalAddressHeader>
         <Polkicon address={address} fontSize="2.75rem" />
         <h2>
           &nbsp;&nbsp;
           {identity === null ? ellipsisFn(address) : identity}
         </h2>
-      </div>
+      </ModalAddressHeader>
 
       <ModalPadding horizontalOnly>
         <StatsWrapper>
@@ -118,8 +118,7 @@ export const ValidatorMetrics = () => {
         </StatsWrapper>
       </ModalPadding>
       <div
-        className="body"
-        style={{ position: 'relative', marginTop: '0.5rem' }}
+        style={{ position: 'relative', marginTop: '0.5rem', padding: '1rem' }}
       >
         <PluginLabel plugin="subscan" />
         <CardWrapper
diff --git a/packages/app/src/pages/Community/Item.tsx b/packages/app/src/pages/Community/Item.tsx
index c240c316e7..dd708d5259 100644
--- a/packages/app/src/pages/Community/Item.tsx
+++ b/packages/app/src/pages/Community/Item.tsx
@@ -9,9 +9,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useNetwork } from 'contexts/Network'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Suspense, lazy, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { ItemWrapper } from './Wrappers'
 import { useCommunitySections } from './context'
 import type { ItemProps } from './types'
diff --git a/packages/app/src/pages/Nominate/Active/CommissionPrompt.tsx b/packages/app/src/pages/Nominate/Active/CommissionPrompt.tsx
index 490fe787bb..f7ccfecb37 100644
--- a/packages/app/src/pages/Nominate/Active/CommissionPrompt.tsx
+++ b/packages/app/src/pages/Nominate/Active/CommissionPrompt.tsx
@@ -13,10 +13,10 @@ import { useStaking } from 'contexts/Staking'
 import { useTheme } from 'contexts/Themes'
 import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ButtonRow, PageRow } from 'ui-structure'
 
 export const CommissionPrompt = () => {
diff --git a/packages/app/src/pages/Nominate/Active/ManageBond.tsx b/packages/app/src/pages/Nominate/Active/ManageBond.tsx
index 262d019ef6..9bdd4adb72 100644
--- a/packages/app/src/pages/Nominate/Active/ManageBond.tsx
+++ b/packages/app/src/pages/Nominate/Active/ManageBond.tsx
@@ -14,11 +14,11 @@ import { useStaking } from 'contexts/Staking'
 import { useTransferOptions } from 'contexts/TransferOptions'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { BondedChart } from 'library/BarChart/BondedChart'
 import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ButtonRow } from 'ui-structure'
 import { planckToUnitBn } from 'utils'
 
diff --git a/packages/app/src/pages/Nominate/Active/Status/NewNominator.tsx b/packages/app/src/pages/Nominate/Active/Status/NewNominator.tsx
index e2187b0b8d..7f976ce941 100644
--- a/packages/app/src/pages/Nominate/Active/Status/NewNominator.tsx
+++ b/packages/app/src/pages/Nominate/Active/Status/NewNominator.tsx
@@ -7,11 +7,11 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useApi } from 'contexts/Api'
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useActivePool } from 'contexts/Pools/ActivePool'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CallToActionWrapper } from 'library/CallToAction'
 import { CallToActionLoader } from 'library/Loader/CallToAction'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+import { useOverlay } from 'ui-overlay'
 import type { NewNominatorProps } from '../types'
 
 export const NewNominator = ({ syncing }: NewNominatorProps) => {
diff --git a/packages/app/src/pages/Nominate/Active/Status/NominationStatus.tsx b/packages/app/src/pages/Nominate/Active/Status/NominationStatus.tsx
index 29c6cfde15..570ea2e51b 100644
--- a/packages/app/src/pages/Nominate/Active/Status/NominationStatus.tsx
+++ b/packages/app/src/pages/Nominate/Active/Status/NominationStatus.tsx
@@ -11,9 +11,9 @@ import { useStaking } from 'contexts/Staking'
 import { useNominationStatus } from 'hooks/useNominationStatus'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Stat } from 'library/Stat'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { useActivePool } from '../../../../contexts/Pools/ActivePool'
 
 export const NominationStatus = ({
diff --git a/packages/app/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx b/packages/app/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx
index 0c85b23565..b799eed959 100644
--- a/packages/app/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx
+++ b/packages/app/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx
@@ -9,9 +9,9 @@ import { useStaking } from 'contexts/Staking'
 import { usePayeeConfig } from 'hooks/usePayeeConfig'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Stat } from 'library/Stat'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 
 export const PayoutDestinationStatus = () => {
   const { t } = useTranslation('pages')
diff --git a/packages/app/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx b/packages/app/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx
index b26e85f52a..a18fd518fc 100644
--- a/packages/app/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx
+++ b/packages/app/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx
@@ -9,9 +9,9 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useNetwork } from 'contexts/Network'
 import { usePayouts } from 'contexts/Payouts'
 import { usePlugins } from 'contexts/Plugins'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Stat } from 'library/Stat'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 
 export const UnclaimedPayoutsStatus = ({ dimmed }: { dimmed: boolean }) => {
   const { t } = useTranslation()
diff --git a/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx b/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx
index eb75a83103..79608589f7 100644
--- a/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx
+++ b/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx
@@ -8,10 +8,10 @@ import { useTheme } from 'contexts/Themes'
 import { useTransferOptions } from 'contexts/TransferOptions'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ButtonRow, PageRow } from 'ui-structure'
 
 export const UnstakePrompts = () => {
diff --git a/packages/app/src/pages/Nominate/Active/index.tsx b/packages/app/src/pages/Nominate/Active/index.tsx
index 5c65e4a6a2..411398baf8 100644
--- a/packages/app/src/pages/Nominate/Active/index.tsx
+++ b/packages/app/src/pages/Nominate/Active/index.tsx
@@ -9,7 +9,6 @@ import { useStaking } from 'contexts/Staking'
 import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { useSyncing } from 'hooks/useSyncing'
 import { useUnstaking } from 'hooks/useUnstaking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
 import { ListStatusHeader } from 'library/List'
 import { Nominations } from 'library/Nominations'
@@ -17,6 +16,7 @@ import { StatBoxList } from 'library/StatBoxList'
 import { WithdrawPrompt } from 'library/WithdrawPrompt'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { PageRow, RowSection } from 'ui-structure'
 import { CommissionPrompt } from './CommissionPrompt'
 import { ManageBond } from './ManageBond'
diff --git a/packages/app/src/pages/Overview/AccountBalance/BalanceChart.tsx b/packages/app/src/pages/Overview/AccountBalance/BalanceChart.tsx
index 53c65f1151..00ee853d88 100644
--- a/packages/app/src/pages/Overview/AccountBalance/BalanceChart.tsx
+++ b/packages/app/src/pages/Overview/AccountBalance/BalanceChart.tsx
@@ -12,13 +12,13 @@ import { useNetwork } from 'contexts/Network'
 import { usePlugins } from 'contexts/Plugins'
 import { useTransferOptions } from 'contexts/TransferOptions'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { BarSegment } from 'library/BarChart/BarSegment'
 import { LegendItem } from 'library/BarChart/LegendItem'
 import { Bar, BarChartWrapper, Legend } from 'library/BarChart/Wrappers'
 import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonTertiary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 import { FiatValue } from './FiatValue'
 
diff --git a/packages/app/src/pages/Pools/ClosurePrompts.tsx b/packages/app/src/pages/Pools/ClosurePrompts.tsx
index 74fbd8f5bc..848d0b35f6 100644
--- a/packages/app/src/pages/Pools/ClosurePrompts.tsx
+++ b/packages/app/src/pages/Pools/ClosurePrompts.tsx
@@ -8,10 +8,10 @@ import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useTheme } from 'contexts/Themes'
 import { useTransferOptions } from 'contexts/TransferOptions'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ButtonRow, PageRow } from 'ui-structure'
 
 export const ClosurePrompts = () => {
diff --git a/packages/app/src/pages/Pools/ManageBond.tsx b/packages/app/src/pages/Pools/ManageBond.tsx
index 27a933831b..621a30b23e 100644
--- a/packages/app/src/pages/Pools/ManageBond.tsx
+++ b/packages/app/src/pages/Pools/ManageBond.tsx
@@ -11,11 +11,11 @@ import { useNetwork } from 'contexts/Network'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useTransferOptions } from 'contexts/TransferOptions'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { BondedChart } from 'library/BarChart/BondedChart'
 import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { ButtonRow } from 'ui-structure'
 import { planckToUnitBn } from 'utils'
 
diff --git a/packages/app/src/pages/Pools/ManagePool/index.tsx b/packages/app/src/pages/Pools/ManagePool/index.tsx
index e91f925ce7..7605a5aca3 100644
--- a/packages/app/src/pages/Pools/ManagePool/index.tsx
+++ b/packages/app/src/pages/Pools/ManagePool/index.tsx
@@ -5,11 +5,11 @@ import { faChevronCircleRight } from '@fortawesome/free-solid-svg-icons'
 import { useHelp } from 'contexts/Help'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useValidators } from 'contexts/Validators/ValidatorEntries'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
 import { Nominations } from 'library/Nominations'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { PageRow } from 'ui-structure'
 
 export const ManagePool = () => {
diff --git a/packages/app/src/pages/Pools/PoolStats/index.tsx b/packages/app/src/pages/Pools/PoolStats/index.tsx
index 80ef3ce323..febc45c249 100644
--- a/packages/app/src/pages/Pools/PoolStats/index.tsx
+++ b/packages/app/src/pages/Pools/PoolStats/index.tsx
@@ -7,12 +7,12 @@ import { useNetwork } from 'contexts/Network'
 import { usePlugins } from 'contexts/Plugins'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { usePoolCommission } from 'hooks/usePoolCommission'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Header } from 'library/Announcements/Header'
 import type { PoolStatLabel } from 'library/Announcements/types'
 import { Wrapper } from 'library/Announcements/Wrappers'
 import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 import { Announcements } from './Announcements'
 
diff --git a/packages/app/src/pages/Pools/Roles/index.tsx b/packages/app/src/pages/Pools/Roles/index.tsx
index 8f24e21f30..138a2ca42a 100644
--- a/packages/app/src/pages/Pools/Roles/index.tsx
+++ b/packages/app/src/pages/Pools/Roles/index.tsx
@@ -13,11 +13,11 @@ import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CardHeaderWrapper } from 'library/Card/Wrappers'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ButtonHelp, ButtonPrimary, ButtonPrimaryInvert } from 'ui-buttons'
+import { useOverlay } from 'ui-overlay'
 import { RolesWrapper } from '../ManagePool/Wrappers'
 import { PoolAccount } from '../PoolAccount'
 import { RoleEditInput } from './RoleEditInput'
diff --git a/packages/app/src/pages/Pools/Status/MembershipStatus.tsx b/packages/app/src/pages/Pools/Status/MembershipStatus.tsx
index a69391910c..f7dc66f60a 100644
--- a/packages/app/src/pages/Pools/Status/MembershipStatus.tsx
+++ b/packages/app/src/pages/Pools/Status/MembershipStatus.tsx
@@ -10,9 +10,9 @@ import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { determinePoolDisplay } from 'contexts/Pools/util'
 import { useStaking } from 'contexts/Staking'
 import { useTransferOptions } from 'contexts/TransferOptions'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Stat } from 'library/Stat'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import type { MembershipStatusProps } from './types'
 import { useStatusButtons } from './useStatusButtons'
 
diff --git a/packages/app/src/pages/Pools/Status/NewMember.tsx b/packages/app/src/pages/Pools/Status/NewMember.tsx
index 3dff73e612..926b587843 100644
--- a/packages/app/src/pages/Pools/Status/NewMember.tsx
+++ b/packages/app/src/pages/Pools/Status/NewMember.tsx
@@ -6,12 +6,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useJoinPools } from 'contexts/Pools/JoinPools'
 import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'
 import { useStaking } from 'contexts/Staking'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { CallToActionWrapper } from 'library/CallToAction'
 import { CallToActionLoader } from 'library/Loader/CallToAction'
 import { PoolSync } from 'library/PoolSync'
 import { StyledLoader } from 'library/PoolSync/Loader'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 import { usePoolsTabs } from '../context'
 import type { NewMemberProps } from './types'
 import { useStatusButtons } from './useStatusButtons'
diff --git a/packages/app/src/pages/Pools/Status/RewardsStatus.tsx b/packages/app/src/pages/Pools/Status/RewardsStatus.tsx
index 31b59479ca..65ee32a039 100644
--- a/packages/app/src/pages/Pools/Status/RewardsStatus.tsx
+++ b/packages/app/src/pages/Pools/Status/RewardsStatus.tsx
@@ -9,9 +9,9 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
 import { useNetwork } from 'contexts/Network'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useSyncing } from 'hooks/useSyncing'
-import { useOverlay } from 'kits/Overlay/Provider'
 import { Stat } from 'library/Stat'
 import { useTranslation } from 'react-i18next'
+import { useOverlay } from 'ui-overlay'
 
 export const RewardsStatus = ({ dimmed }: { dimmed: boolean }) => {
   const { t } = useTranslation('pages')
diff --git a/packages/ui-overlay/package.json b/packages/ui-overlay/package.json
new file mode 100644
index 0000000000..4da72b21bf
--- /dev/null
+++ b/packages/ui-overlay/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "ui-overlay",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "scripts": {
+    "clear": "rm -rf build tsconfig.tsbuildinfo dist",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
+  },
+  "exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types.ts",
+    "./structure": "./src/structure/index.tsx",
+    "./css": "./src/index.scss"
+  }
+}
diff --git a/packages/app/src/kits/Overlay/Background.tsx b/packages/ui-overlay/src/Background.tsx
similarity index 94%
rename from packages/app/src/kits/Overlay/Background.tsx
rename to packages/ui-overlay/src/Background.tsx
index 244b12fce0..ec739b4356 100644
--- a/packages/app/src/kits/Overlay/Background.tsx
+++ b/packages/ui-overlay/src/Background.tsx
@@ -5,7 +5,7 @@ import { useAnimation } from 'framer-motion'
 import { useEffect } from 'react'
 import { useOverlay } from './Provider'
 import type { CanvasStatus } from './Provider/types'
-import { ModalOverlay } from './structure/ModalOverlay'
+import { OverlayBackground } from './structure/OverlayBackground'
 
 export const Background = ({
   externalOverlayStatus,
@@ -39,7 +39,7 @@ export const Background = ({
   return modalStatus === 'closed' &&
     canvasStatus === 'closed' &&
     externalOverlayStatus === 'closed' ? null : (
-    <ModalOverlay
+    <OverlayBackground
       blur={
         canvasStatus === 'open' || externalOverlayStatus === 'open'
           ? '1.4rem'
diff --git a/packages/app/src/kits/Overlay/Canvas.tsx b/packages/ui-overlay/src/Canvas.tsx
similarity index 92%
rename from packages/app/src/kits/Overlay/Canvas.tsx
rename to packages/ui-overlay/src/Canvas.tsx
index 912b5ec37b..3944756897 100644
--- a/packages/app/src/kits/Overlay/Canvas.tsx
+++ b/packages/ui-overlay/src/Canvas.tsx
@@ -26,7 +26,7 @@ export const Canvas = ({
     canvas: {
       status,
       setCanvasStatus,
-      config: { key, size, scroll },
+      config: { key, size },
     },
   } = useOverlay()
 
@@ -46,7 +46,7 @@ export const Canvas = ({
     }
   }
 
-  // Control dim help status change.
+  // Control dim help status change
   useEffect(() => {
     if (externalOverlayStatus === 'open' && status === 'open') {
       onOut(false)
@@ -60,7 +60,7 @@ export const Canvas = ({
     }
   }, [externalOverlayStatus])
 
-  // Control fade in and out on opening and closing states.
+  // Control fade in and out on opening and closing states
   useEffect(() => {
     if (status === 'open') {
       onIn()
@@ -90,7 +90,7 @@ export const Canvas = ({
         },
       }}
     >
-      <CanvasScroll size={size} scroll={scroll || false}>
+      <CanvasScroll size={size}>
         <ModalContent canvas>
           <CanvasContent>
             <ErrorBoundary FallbackComponent={Fallback}>
diff --git a/packages/app/src/kits/Overlay/Modal.tsx b/packages/ui-overlay/src/Modal.tsx
similarity index 69%
rename from packages/app/src/kits/Overlay/Modal.tsx
rename to packages/ui-overlay/src/Modal.tsx
index 6c67863a2d..f348ca1d05 100644
--- a/packages/app/src/kits/Overlay/Modal.tsx
+++ b/packages/ui-overlay/src/Modal.tsx
@@ -37,6 +37,16 @@ export const Modal = ({
   const modalRef = useRef<HTMLDivElement>(null)
   const heightRef = useRef<HTMLDivElement>(null)
 
+  // Whether the modal card is currently dimmed
+  const dimmed = externalOverlayStatus === 'open' || canvasStatus === 'open'
+
+  // Determine modal overflow behaviour based on scroll and height
+  const overflow = options?.disableScroll
+    ? 'hidden'
+    : modalHeight >= modalMaxHeight
+      ? 'scroll'
+      : 'hidden'
+
   const onOutClose = async () => {
     setOpenOverlayInstances('dec', 'modal')
     setActiveOverlayInstance(null)
@@ -60,7 +70,7 @@ export const Modal = ({
     setModalHeight(modalRef.current?.clientHeight || 0)
   }
 
-  // Control on modal status change.
+  // Control on modal status change
   useEffect(() => {
     if (activeOverlayInstance === 'modal' && status === 'open') {
       onIn()
@@ -70,13 +80,13 @@ export const Modal = ({
     }
   }, [status])
 
-  // Control on canvas status change.
+  // Control on canvas status change
   useEffect(() => {
-    // fade out modal if canvas has been opened.
+    // fade out modal if canvas has been opened
     if (canvasStatus === 'open' && status === 'open') {
       onOut()
     }
-    // fade in modal if its open & canvas is closing.
+    // fade in modal if its open & canvas is closing
     if (canvasStatus === 'closing') {
       if (status === 'open') {
         onIn()
@@ -84,13 +94,13 @@ export const Modal = ({
     }
   }, [canvasStatus])
 
-  // Control dim external overlay change.
+  // Control dim external overlay change
   useEffect(() => {
-    // fade out modal if external overlay has been opened.
+    // fade out modal if external overlay has been opened
     if (externalOverlayStatus === 'open' && status === 'open') {
       onOut()
     }
-    // fade in modal if its open & external overlay is closing.
+    // fade in modal if its open & external overlay is closing
     if (
       externalOverlayStatus === 'closing' &&
       activeOverlayInstance === 'modal'
@@ -99,10 +109,10 @@ export const Modal = ({
     }
   }, [externalOverlayStatus])
 
-  // Resize modal on status or resize change.
+  // Resize modal on status or resize change
   useEffect(() => handleResize(), [modalResizeCounter, status])
 
-  // Resize modal on window size change.
+  // Resize modal on window size change
   useEffect(() => {
     windowResize()
     return () => {
@@ -110,7 +120,7 @@ export const Modal = ({
     }
   })
 
-  // Update the modal's content ref as they are initialised.
+  // Update the modal's content ref as they are initialised
   useEffect(() => {
     setModalRef(modalRef)
     setModalHeightRef(heightRef)
@@ -140,42 +150,20 @@ export const Modal = ({
       }}
       style={{ opacity: status === 'opening' ? 0 : 1 }}
     >
-      <div>
-        <ModalScroll
-          ref={heightRef}
-          size={size}
-          style={{
-            height: modalHeight,
-            overflow: options?.disableScroll
-              ? 'hidden'
-              : modalHeight >= modalMaxHeight
-                ? 'scroll'
-                : 'hidden',
-          }}
-        >
-          <ModalCard
-            ref={modalRef}
-            className={
-              externalOverlayStatus === 'open' || canvasStatus === 'open'
-                ? 'dimmed'
-                : undefined
-            }
-          >
-            <ErrorBoundary FallbackComponent={Fallback || null}>
-              {ActiveModal && <ActiveModal />}
-            </ErrorBoundary>
-          </ModalCard>
-        </ModalScroll>
-        <button
-          type="button"
-          className="close"
-          onClick={() => {
-            setModalStatus('closing')
-          }}
-        >
-          &nbsp;
-        </button>
-      </div>
+      <ModalScroll
+        ref={heightRef}
+        size={size}
+        style={{
+          height: modalHeight,
+          overflow,
+        }}
+      >
+        <ModalCard ref={modalRef} dimmed={dimmed}>
+          <ErrorBoundary FallbackComponent={Fallback || null}>
+            {ActiveModal && <ActiveModal />}
+          </ErrorBoundary>
+        </ModalCard>
+      </ModalScroll>
     </ModalContainer>
   ) : null
 }
diff --git a/packages/app/src/kits/Overlay/index.tsx b/packages/ui-overlay/src/Overlay.tsx
similarity index 100%
rename from packages/app/src/kits/Overlay/index.tsx
rename to packages/ui-overlay/src/Overlay.tsx
diff --git a/packages/app/src/kits/Overlay/Provider/defaults.ts b/packages/ui-overlay/src/Provider/defaults.ts
similarity index 100%
rename from packages/app/src/kits/Overlay/Provider/defaults.ts
rename to packages/ui-overlay/src/Provider/defaults.ts
diff --git a/packages/app/src/kits/Overlay/Provider/index.tsx b/packages/ui-overlay/src/Provider/index.tsx
similarity index 83%
rename from packages/app/src/kits/Overlay/Provider/index.tsx
rename to packages/ui-overlay/src/Provider/index.tsx
index 05ab79fb13..03fc5f8441 100644
--- a/packages/app/src/kits/Overlay/Provider/index.tsx
+++ b/packages/ui-overlay/src/Provider/index.tsx
@@ -27,7 +27,7 @@ export const OverlayContext = createContext<OverlayContextInterface>(
 export const useOverlay = () => useContext(OverlayContext)
 
 export const OverlayProvider = ({ children }: { children: ReactNode }) => {
-  // Store the modal status.
+  // Store the modal status
   const [openOverlayInstances, setOpenOverlayInstancesState] =
     useState<number>(0)
 
@@ -43,33 +43,33 @@ export const OverlayProvider = ({ children }: { children: ReactNode }) => {
     }
   }
 
-  // Store the currently active overlay instance.
+  // Store the currently active overlay instance
   const [activeOverlayInstance, setActiveOverlayInstance] =
     useState<ActiveOverlayInstance>(null)
 
-  // Store the modal status.
+  // Store the modal status
   const [modalStatus, setModalStatusState] = useState<ModalStatus>('closed')
   const modalStatusRef = useRef(modalStatus)
 
-  // Store modal configuration.
+  // Store modal configuration
   const [modalConfig, setModalConfigState] =
     useState<ModalConfig>(defaultModalConfig)
   const modalConfigRef = useRef(modalConfig)
 
-  // Store the modal's current height.
+  // Store the modal's current height
   const [modalHeight, setModalHeightState] = useState<number>(0)
 
-  // Store the modal's resize counter.
+  // Store the modal's resize counter
   const [modalResizeCounter, setModalResizeCounterState] = useState<number>(0)
 
-  // Store the ref to the modal height container. Used for controlling whether height is transitionable.
+  // Store the ref to the modal height container. Used for controlling whether height is transitionable
   const [modalRef, setModalRef] = useState<RefObject<HTMLDivElement>>()
 
-  // Store the ref to the modal height container. Used for controlling whether height is transitionable.
+  // Store the ref to the modal height container. Used for controlling whether height is transitionable
   const [modalHeightRef, setModalHeightRef] =
     useState<RefObject<HTMLDivElement>>()
 
-  // The maximum allowed height for the modal.
+  // The maximum allowed height for the modal
   const modalMaxHeight = window.innerHeight * 0.8
 
   const setModalConfig = (config: ModalConfig) => {
@@ -92,7 +92,7 @@ export const OverlayProvider = ({ children }: { children: ReactNode }) => {
     }
   }
 
-  // Closes one modal and opens another.
+  // Closes one modal and opens another
   const replaceModal = ({ key, size = 'lg', options = {} }: ModalConfig) => {
     setModalStatus('replacing')
     setTimeout(() => {
@@ -112,14 +112,14 @@ export const OverlayProvider = ({ children }: { children: ReactNode }) => {
       return
     }
 
-    // Ensure transition class is removed if not transitioning. Otherwise, ensure class exists.
+    // Ensure transition class is removed if not transitioning. Otherwise, ensure class exists
     if (transition) {
       transitionOn()
     } else {
       transitionOff()
     }
 
-    // Limit maximum height to 80% of window height, or 90% if window width <= 600.
+    // Limit maximum height to 80% of window height, or 90% if window width <= 600
     const maxHeight =
       window.innerWidth <= 600
         ? window.innerHeight * 0.9
@@ -128,41 +128,48 @@ export const OverlayProvider = ({ children }: { children: ReactNode }) => {
       height = maxHeight
     }
 
-    // Update height state.
+    // Update height state
     setModalHeightState(height)
 
-    // If transitioning, remove after enough time to finish transition.
+    // If transitioning, remove after enough time to finish transition
     if (transition) {
       setTimeout(() => transitionOff(), 500)
     }
   }
 
-  // Increments modal resize to trigger a height transition.
+  // Increments modal resize to trigger a height transition
   const setModalResize = () => {
     transitionOn()
     setModalResizeCounterState(modalResizeCounter + 1)
     setTimeout(() => transitionOff(), 500)
   }
 
-  // Helper to set the transition height class of the modal.
-  const transitionOn = () =>
-    modalHeightRef?.current?.classList.add('transition-height')
+  // Helper to set the transition height class of the modal
+  const transitionOn = () => {
+    if (modalHeightRef?.current) {
+      modalHeightRef.current.style.transition =
+        'height 0.5s cubic-bezier(0.1, 1, 0.2, 1)'
+    }
+  }
 
-  // Helper to remove the transition height class of the modal.
-  const transitionOff = () =>
-    modalHeightRef?.current?.classList.remove('transition-height')
+  // Helper to remove the transition height class of the modal
+  const transitionOff = () => {
+    if (modalHeightRef?.current) {
+      modalHeightRef.current.style.transition = 'height 0s'
+    }
+  }
 
   // Store canvas status
   const [canvasStatus, setCanvasStatus] = useState<CanvasStatus>('closed')
 
-  // Store config options of the canvas.
+  // Store config options of the canvas
   const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>({
     key: '',
     scroll: true,
     options: {},
   })
 
-  // Open the canvas.
+  // Open the canvas
   const openCanvas = ({
     key,
     size = 'lg',
@@ -179,12 +186,12 @@ export const OverlayProvider = ({ children }: { children: ReactNode }) => {
     })
   }
 
-  // Close the canvas.
+  // Close the canvas
   const closeCanvas = () => {
     setCanvasStatus('closing')
   }
 
-  // Update modal height and open modal once refs are initialised.
+  // Update modal height and open modal once refs are initialised
   useEffectIgnoreInitial(() => {
     const height = modalRef?.current?.clientHeight || 0
     if (modalStatusRef.current === 'opening') {
@@ -195,7 +202,7 @@ export const OverlayProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [modalStatusRef.current, modalRef?.current])
 
-  // When canvas fade out completes, reset config.
+  // When canvas fade out completes, reset config
   useEffectIgnoreInitial(() => {
     if (canvasStatus === 'closed') {
       setCanvasConfig(defaultCanvasConfig)
diff --git a/packages/app/src/kits/Overlay/Provider/types.ts b/packages/ui-overlay/src/Provider/types.ts
similarity index 100%
rename from packages/app/src/kits/Overlay/Provider/types.ts
rename to packages/ui-overlay/src/Provider/types.ts
diff --git a/packages/ui-overlay/src/index.tsx b/packages/ui-overlay/src/index.tsx
new file mode 100644
index 0000000000..0f13c366f6
--- /dev/null
+++ b/packages/ui-overlay/src/index.tsx
@@ -0,0 +1,5 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export * from './Overlay'
+export * from './Provider'
diff --git a/packages/ui-overlay/src/structure/CanvasContainer/index.module.scss b/packages/ui-overlay/src/structure/CanvasContainer/index.module.scss
new file mode 100644
index 0000000000..339170de87
--- /dev/null
+++ b/packages/ui-overlay/src/structure/CanvasContainer/index.module.scss
@@ -0,0 +1,12 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.canvasContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0 3rem;
+  position: fixed;
+  z-index: 10;
+}
diff --git a/packages/ui-overlay/src/structure/CanvasContainer/index.tsx b/packages/ui-overlay/src/structure/CanvasContainer/index.tsx
new file mode 100644
index 0000000000..6b058538c2
--- /dev/null
+++ b/packages/ui-overlay/src/structure/CanvasContainer/index.tsx
@@ -0,0 +1,20 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import type { ModalAnimationProps } from '../../types'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const CanvasContainer = ({ children, ...rest }: ModalAnimationProps) => {
+  const allClasses = classNames(
+    commonClasses.fixedPosition,
+    classes.canvasContainer
+  )
+  return (
+    <motion.div className={allClasses} {...rest}>
+      {children}
+    </motion.div>
+  )
+}
diff --git a/packages/ui-overlay/src/structure/CanvasContent/index.module.scss b/packages/ui-overlay/src/structure/CanvasContent/index.module.scss
new file mode 100644
index 0000000000..8c12809c3a
--- /dev/null
+++ b/packages/ui-overlay/src/structure/CanvasContent/index.module.scss
@@ -0,0 +1,10 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.canvasContent {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/packages/ui-overlay/src/structure/CanvasContent/index.tsx b/packages/ui-overlay/src/structure/CanvasContent/index.tsx
new file mode 100644
index 0000000000..413fc8828d
--- /dev/null
+++ b/packages/ui-overlay/src/structure/CanvasContent/index.tsx
@@ -0,0 +1,9 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
+
+export const CanvasContent = ({ children }: ComponentBase) => (
+  <div className={classes.canvasContent}>{children}</div>
+)
diff --git a/packages/ui-overlay/src/structure/CanvasScroll/index.module.scss b/packages/ui-overlay/src/structure/CanvasScroll/index.module.scss
new file mode 100644
index 0000000000..3dd01aaaf8
--- /dev/null
+++ b/packages/ui-overlay/src/structure/CanvasScroll/index.module.scss
@@ -0,0 +1,19 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.canvasScroll {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden auto;
+  z-index: 9;
+  max-width: 800px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &.xl {
+    max-width: 1250px;
+  }
+}
diff --git a/packages/app/src/kits/Overlay/structure/CanvasScroll.tsx b/packages/ui-overlay/src/structure/CanvasScroll/index.tsx
similarity index 51%
rename from packages/app/src/kits/Overlay/structure/CanvasScroll.tsx
rename to packages/ui-overlay/src/structure/CanvasScroll/index.tsx
index 714dfe3e4c..301433fc71 100644
--- a/packages/app/src/kits/Overlay/structure/CanvasScroll.tsx
+++ b/packages/ui-overlay/src/structure/CanvasScroll/index.tsx
@@ -1,25 +1,17 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { appendOrEmpty } from '@w3ux/utils'
 import { motion } from 'framer-motion'
-import type { CanvasScrollProps } from '../types'
+import type { CanvasScrollProps } from '../../types'
+import classes from './index.module.scss'
 
-/**
- * @name CanvasScroll
- * @summary Canvas scrollable container.
- */
 export const CanvasScroll = ({
   children,
   size,
-  scroll = true,
   ...rest
 }: CanvasScrollProps) => (
   <motion.div
-    className={`canvas-scroll${appendOrEmpty(size === 'xl', 'xl')}${appendOrEmpty(
-      scroll,
-      'scroll'
-    )}`}
+    className={`${classes.canvasScroll} ${size === 'xl' ? classes.xl : ''}`}
     {...rest}
   >
     {children}
diff --git a/packages/ui-overlay/src/structure/ModalAddressHeader/index.module.scss b/packages/ui-overlay/src/structure/ModalAddressHeader/index.module.scss
new file mode 100644
index 0000000000..a114c98caa
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalAddressHeader/index.module.scss
@@ -0,0 +1,9 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalAddressHeader {
+  display: flex;
+  align-items: center;
+  padding: 1rem 1rem 0;
+  width: 100%;
+}
diff --git a/packages/ui-overlay/src/structure/ModalAddressHeader/index.tsx b/packages/ui-overlay/src/structure/ModalAddressHeader/index.tsx
new file mode 100644
index 0000000000..6038ec8d94
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalAddressHeader/index.tsx
@@ -0,0 +1,9 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
+
+export const ModalAddressHeader = ({ children }: ComponentBase) => (
+  <div className={classes.modalAddressHeader}>{children}</div>
+)
diff --git a/packages/ui-overlay/src/structure/ModalCard/index.module.scss b/packages/ui-overlay/src/structure/ModalCard/index.module.scss
new file mode 100644
index 0000000000..4cb5e2540a
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalCard/index.module.scss
@@ -0,0 +1,10 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalCard {
+  background: var(--background-modal);
+  transition: opacity 0.15s;
+  &.dimmed {
+    opacity: 0;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalCard/index.tsx b/packages/ui-overlay/src/structure/ModalCard/index.tsx
new file mode 100644
index 0000000000..d46550dad1
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalCard/index.tsx
@@ -0,0 +1,26 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import type { ForwardedRef } from 'react'
+import { forwardRef } from 'react'
+import type { ModalCardProps } from '../../types'
+import classes from './index.module.scss'
+
+export const ModalCard = forwardRef(
+  (
+    { children, dimmed }: ModalCardProps,
+    ref?: ForwardedRef<HTMLDivElement | null>
+  ) => {
+    const allClasses = classNames(classes.modalCard, {
+      [classes.dimmed]: dimmed,
+    })
+    return (
+      <div ref={ref} className={allClasses}>
+        {children}
+      </div>
+    )
+  }
+)
+
+ModalCard.displayName = 'ModalCard'
diff --git a/packages/ui-overlay/src/structure/ModalContainer/index.module.scss b/packages/ui-overlay/src/structure/ModalContainer/index.module.scss
new file mode 100644
index 0000000000..7d04ca87a6
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalContainer/index.module.scss
@@ -0,0 +1,20 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalContainer {
+  z-index: 9;
+  > div {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 2rem;
+  }
+  .close {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 8;
+    cursor: default;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalContainer/index.tsx b/packages/ui-overlay/src/structure/ModalContainer/index.tsx
new file mode 100644
index 0000000000..f1298bf086
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalContainer/index.tsx
@@ -0,0 +1,33 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import { useOverlay } from '../../Provider'
+import type { ModalAnimationProps } from '../../types'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => {
+  const {
+    modal: { setModalStatus },
+  } = useOverlay()
+  const allClasses = classNames(
+    commonClasses.fixedPosition,
+    classes.modalContainer
+  )
+  return (
+    <motion.div className={allClasses} {...rest}>
+      <div>
+        {children}
+        <button
+          type="button"
+          className={classes.close}
+          onClick={() => setModalStatus('closing')}
+        >
+          &nbsp;
+        </button>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/packages/ui-overlay/src/structure/ModalContent/index.module.scss b/packages/ui-overlay/src/structure/ModalContent/index.module.scss
new file mode 100644
index 0000000000..088120484f
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalContent/index.module.scss
@@ -0,0 +1,14 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalContent {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  padding: 5rem 0;
+  &.canvas {
+    padding: 0;
+    min-height: 100vh;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalContent/index.tsx b/packages/ui-overlay/src/structure/ModalContent/index.tsx
new file mode 100644
index 0000000000..f15195a9c3
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalContent/index.tsx
@@ -0,0 +1,14 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import type { ModalContentProps } from '../../types'
+import classes from './index.module.scss'
+
+export const ModalContent = ({ children, canvas }: ModalContentProps) => {
+  const allClasses = classNames(classes.modalContent, {
+    [classes.canvas]: canvas,
+  })
+  return <motion.div className={allClasses}>{children}</motion.div>
+}
diff --git a/packages/ui-overlay/src/structure/ModalCustomHeader/index.module.scss b/packages/ui-overlay/src/structure/ModalCustomHeader/index.module.scss
new file mode 100644
index 0000000000..c5988d2313
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalCustomHeader/index.module.scss
@@ -0,0 +1,24 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.customHeader {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 0.5rem;
+  position: relative;
+  > div:first-child {
+    display: flex;
+    flex-grow: 1;
+    > h1 {
+      color: var(--text-color-primary);
+      font-size: 1.4rem;
+      font-family: Poppins700, sans-serif;
+      font-weight: 700;
+      padding: 0 0.5rem;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
diff --git a/packages/app/src/kits/Overlay/structure/ModalCustomHeader.tsx b/packages/ui-overlay/src/structure/ModalCustomHeader/index.tsx
similarity index 66%
rename from packages/app/src/kits/Overlay/structure/ModalCustomHeader.tsx
rename to packages/ui-overlay/src/structure/ModalCustomHeader/index.tsx
index 23e85ab338..0a15389334 100644
--- a/packages/app/src/kits/Overlay/structure/ModalCustomHeader.tsx
+++ b/packages/ui-overlay/src/structure/ModalCustomHeader/index.tsx
@@ -2,13 +2,10 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
 
-/**
- * @name ModalCustomHeader
- * @summary The header section along with the title.
- */
 export const ModalCustomHeader = ({ children, style }: ComponentBase) => (
-  <div className="modal-custom-header" style={style}>
+  <div className={classes.customHeader} style={style}>
     {children}
   </div>
 )
diff --git a/packages/ui-overlay/src/structure/ModalFixedTitle/index.module.scss b/packages/ui-overlay/src/structure/ModalFixedTitle/index.module.scss
new file mode 100644
index 0000000000..6aca737dec
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalFixedTitle/index.module.scss
@@ -0,0 +1,13 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.fixedTitle {
+  background: transparent;
+  padding: 1rem 0 0;
+  width: 100%;
+
+  &.withStyle {
+    background: var(--background-default);
+    padding: 1rem 1rem 0;
+  }
+}
diff --git a/packages/app/src/kits/Overlay/structure/ModalFixedTitle.tsx b/packages/ui-overlay/src/structure/ModalFixedTitle/index.tsx
similarity index 52%
rename from packages/app/src/kits/Overlay/structure/ModalFixedTitle.tsx
rename to packages/ui-overlay/src/structure/ModalFixedTitle/index.tsx
index 47d70d6d6f..da27c3aa16 100644
--- a/packages/app/src/kits/Overlay/structure/ModalFixedTitle.tsx
+++ b/packages/ui-overlay/src/structure/ModalFixedTitle/index.tsx
@@ -1,27 +1,25 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { appendOrEmpty } from '@w3ux/utils'
+import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalFixedTitleProps } from '../types'
+import type { ModalFixedTitleProps } from '../../types'
+import classes from './index.module.scss'
 
-/**
- * @name ModalFixedTitle
- * @summary Fixed the title.
- */
 export const ModalFixedTitle = forwardRef(
   (
     { children, style, withStyle }: ModalFixedTitleProps,
     ref?: ForwardedRef<HTMLDivElement>
-  ) => (
-    <div
-      ref={ref}
-      className={`modal-fixed-title${appendOrEmpty(withStyle, 'with-style')}`}
-      style={style}
-    >
-      {children}
-    </div>
-  )
+  ) => {
+    const allClasses = classNames(classes.fixedTitle, {
+      [classes.withStyle]: withStyle,
+    })
+    return (
+      <div ref={ref} className={allClasses} style={style}>
+        {children}
+      </div>
+    )
+  }
 )
 ModalFixedTitle.displayName = 'ModalFixedTitle'
diff --git a/packages/ui-overlay/src/structure/ModalMulti/index.module.scss b/packages/ui-overlay/src/structure/ModalMulti/index.module.scss
new file mode 100644
index 0000000000..b9ff732485
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalMulti/index.module.scss
@@ -0,0 +1,19 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.multi {
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  overflow: hidden auto;
+  flex-grow: 1;
+  .two {
+    flex-basis: 50%;
+    min-width: 50%;
+  }
+  .three {
+    flex-basis: 33.33%;
+    min-width: 33.33%;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalMulti/index.tsx b/packages/ui-overlay/src/structure/ModalMulti/index.tsx
new file mode 100644
index 0000000000..72e7891154
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalMulti/index.tsx
@@ -0,0 +1,13 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const ModalMulti = ({ children }: ComponentBase) => {
+  const allClasses = classNames(commonClasses.scrollBar, classes.multi)
+  return <motion.div className={allClasses}>{children}</motion.div>
+}
diff --git a/packages/ui-overlay/src/structure/ModalMultiThree/index.module.scss b/packages/ui-overlay/src/structure/ModalMultiThree/index.module.scss
new file mode 100644
index 0000000000..3b9215f105
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalMultiThree/index.module.scss
@@ -0,0 +1,10 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.multiThree {
+  width: 300%;
+  > div {
+    flex-basis: 33.33%;
+    min-width: 33.33%;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalMultiThree/index.tsx b/packages/ui-overlay/src/structure/ModalMultiThree/index.tsx
new file mode 100644
index 0000000000..66e744f1f5
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalMultiThree/index.tsx
@@ -0,0 +1,17 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import type { ModalAnimationProps } from '../../types'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const ModalMultiThree = ({ children, ...rest }: ModalAnimationProps) => {
+  const allClasses = classNames(commonClasses.modalMulti, classes.multiThree)
+  return (
+    <motion.div className={allClasses} {...rest}>
+      {children}
+    </motion.div>
+  )
+}
diff --git a/packages/ui-overlay/src/structure/ModalMultiTwo/index.module.scss b/packages/ui-overlay/src/structure/ModalMultiTwo/index.module.scss
new file mode 100644
index 0000000000..d1b58575e2
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalMultiTwo/index.module.scss
@@ -0,0 +1,10 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.multiTwo {
+  width: 200%;
+  > div {
+    flex-basis: 50%;
+    min-width: 50%;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalMultiTwo/index.tsx b/packages/ui-overlay/src/structure/ModalMultiTwo/index.tsx
new file mode 100644
index 0000000000..1d41e030a9
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalMultiTwo/index.tsx
@@ -0,0 +1,17 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import type { ModalAnimationProps } from '../../types'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const ModalMultiTwo = ({ children, ...rest }: ModalAnimationProps) => {
+  const allClasses = classNames(commonClasses.modalMulti, classes.multiTwo)
+  return (
+    <motion.div className={allClasses} {...rest}>
+      {children}
+    </motion.div>
+  )
+}
diff --git a/packages/ui-overlay/src/structure/ModalNotes/index.module.scss b/packages/ui-overlay/src/structure/ModalNotes/index.module.scss
new file mode 100644
index 0000000000..d0b4b2e4ad
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalNotes/index.module.scss
@@ -0,0 +1,13 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalNotes {
+  width: 100%;
+  padding: 0;
+  &.withPadding {
+    padding: 0.75rem 0;
+  }
+  > p {
+    color: var(--text-color-secondary);
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalNotes/index.tsx b/packages/ui-overlay/src/structure/ModalNotes/index.tsx
new file mode 100644
index 0000000000..bdb673351b
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalNotes/index.tsx
@@ -0,0 +1,13 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import type { ModalNotesProps } from '../../types'
+import classes from './index.module.scss'
+
+export const ModalNotes = ({ children, withPadding }: ModalNotesProps) => {
+  const allClasses = classNames(classes.modalNotes, {
+    [classes.withPadding]: withPadding,
+  })
+  return <div className={allClasses}>{children}</div>
+}
diff --git a/packages/ui-overlay/src/structure/ModalPadding/index.module.scss b/packages/ui-overlay/src/structure/ModalPadding/index.module.scss
new file mode 100644
index 0000000000..b5bae042ae
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalPadding/index.module.scss
@@ -0,0 +1,16 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalPadding {
+  display: flex;
+  flex-flow: column wrap;
+  padding: 1rem;
+
+  &.verticalOnly {
+    padding: 1rem 0 0.25rem;
+  }
+
+  &.horizontalOnly {
+    padding: 0 1rem;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalPadding/index.tsx b/packages/ui-overlay/src/structure/ModalPadding/index.tsx
new file mode 100644
index 0000000000..4566080ea6
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalPadding/index.tsx
@@ -0,0 +1,27 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import type { ForwardedRef } from 'react'
+import { forwardRef } from 'react'
+import type { ModalPaddingProps } from '../../types'
+import classes from './index.module.scss'
+
+export const ModalPadding = forwardRef(
+  (
+    { children, style, verticalOnly, horizontalOnly }: ModalPaddingProps,
+    ref?: ForwardedRef<HTMLDivElement | null>
+  ) => {
+    const allClasses = classNames(classes.modalPadding, {
+      [classes.verticalOnly]: verticalOnly,
+      [classes.horizontalOnly]: horizontalOnly,
+    })
+    return (
+      <div ref={ref} className={allClasses} style={style}>
+        {children}
+      </div>
+    )
+  }
+)
+
+ModalPadding.displayName = 'ModalPadding'
diff --git a/packages/ui-overlay/src/structure/ModalScroll/index.module.scss b/packages/ui-overlay/src/structure/ModalScroll/index.module.scss
new file mode 100644
index 0000000000..fa99864987
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalScroll/index.module.scss
@@ -0,0 +1,17 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalScroll {
+  border-radius: 1.5rem;
+  position: relative;
+  z-index: 9;
+  max-height: 100%;
+  width: 100%;
+  max-width: 600px;
+  &.lg {
+    max-width: 800px;
+  }
+  &.xl {
+    max-width: 1250px;
+  }
+}
diff --git a/packages/ui-overlay/src/structure/ModalScroll/index.tsx b/packages/ui-overlay/src/structure/ModalScroll/index.tsx
new file mode 100644
index 0000000000..e8a48373b2
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalScroll/index.tsx
@@ -0,0 +1,31 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import type { ForwardedRef } from 'react'
+import { forwardRef } from 'react'
+import type { ModalScrollProps } from '../../types'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const ModalScroll = forwardRef(
+  (
+    { size, children, style }: ModalScrollProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    const allClasses = classNames(
+      classes.modalScroll,
+      commonClasses.scrollBar,
+      {
+        [classes.lg]: size === 'lg',
+        [classes.xl]: size === 'xl',
+      }
+    )
+    return (
+      <div ref={ref} className={allClasses} style={style}>
+        {children}
+      </div>
+    )
+  }
+)
+ModalScroll.displayName = 'ModalScroll'
diff --git a/packages/ui-overlay/src/structure/ModalSection/index.module.scss b/packages/ui-overlay/src/structure/ModalSection/index.module.scss
new file mode 100644
index 0000000000..c32c691506
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalSection/index.module.scss
@@ -0,0 +1,17 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.carousel {
+  display: flex;
+  flex-flow: column wrap;
+  padding: 0;
+  position: relative;
+  overflow: hidden auto;
+  width: 100%;
+}
+
+.tab {
+  display: flex;
+  margin: 1.25rem 0 0.25rem;
+  width: 100%;
+}
diff --git a/packages/ui-overlay/src/structure/ModalSection/index.tsx b/packages/ui-overlay/src/structure/ModalSection/index.tsx
new file mode 100644
index 0000000000..489ae9c8cc
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalSection/index.tsx
@@ -0,0 +1,18 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import type { ModalSectionProps } from '../../types'
+import classes from './index.module.scss'
+
+export const ModalSection = ({ children, style, type }: ModalSectionProps) => {
+  const allClasses = classNames({
+    [classes.carousel]: type === 'carousel',
+    [classes.tab]: type === 'tab',
+  })
+  return (
+    <div className={allClasses} style={style}>
+      {children}
+    </div>
+  )
+}
diff --git a/packages/ui-overlay/src/structure/ModalTitle/index.module.scss b/packages/ui-overlay/src/structure/ModalTitle/index.module.scss
new file mode 100644
index 0000000000..f302c60ad6
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalTitle/index.module.scss
@@ -0,0 +1,9 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalTitle {
+  font-family: Poppins700, sans-serif;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin: 1rem 0;
+}
diff --git a/packages/ui-overlay/src/structure/ModalTitle/index.tsx b/packages/ui-overlay/src/structure/ModalTitle/index.tsx
new file mode 100644
index 0000000000..a390d123cc
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalTitle/index.tsx
@@ -0,0 +1,9 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
+
+export const ModalTitle = ({ children }: ComponentBase) => (
+  <h2 className={`${classes.modalTitle}`}>{children}</h2>
+)
diff --git a/packages/ui-overlay/src/structure/ModalWarnings/index.module.scss b/packages/ui-overlay/src/structure/ModalWarnings/index.module.scss
new file mode 100644
index 0000000000..f926e4fa42
--- /dev/null
+++ b/packages/ui-overlay/src/structure/ModalWarnings/index.module.scss
@@ -0,0 +1,7 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.modalWarnings {
+  margin-top: 0.75rem;
+  width: 100%;
+}
diff --git a/packages/app/src/kits/Overlay/structure/ModalFooter.tsx b/packages/ui-overlay/src/structure/ModalWarnings/index.tsx
similarity index 52%
rename from packages/app/src/kits/Overlay/structure/ModalFooter.tsx
rename to packages/ui-overlay/src/structure/ModalWarnings/index.tsx
index acc85d28f9..1bae9b171d 100644
--- a/packages/app/src/kits/Overlay/structure/ModalFooter.tsx
+++ b/packages/ui-overlay/src/structure/ModalWarnings/index.tsx
@@ -2,13 +2,10 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
 
-/**
- * @name ModalFooter
- * @summary Used for extrinsics forms.
- */
-export const ModalFooter = ({ children, style }: ComponentBase) => (
-  <div className="modal-footer" style={style}>
+export const ModalWarnings = ({ children, style }: ComponentBase) => (
+  <div className={classes.modalWarnings} style={style}>
     {children}
   </div>
 )
diff --git a/packages/ui-overlay/src/structure/OverlayBackground/index.module.scss b/packages/ui-overlay/src/structure/OverlayBackground/index.module.scss
new file mode 100644
index 0000000000..bf5c029a67
--- /dev/null
+++ b/packages/ui-overlay/src/structure/OverlayBackground/index.module.scss
@@ -0,0 +1,9 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.overlayBackground {
+  background: var(--modal-background-color);
+  transition: backdrop-filter 0.5s;
+  backdrop-filter: blur(4px);
+  z-index: 9;
+}
diff --git a/packages/ui-overlay/src/structure/OverlayBackground/index.tsx b/packages/ui-overlay/src/structure/OverlayBackground/index.tsx
new file mode 100644
index 0000000000..150e563773
--- /dev/null
+++ b/packages/ui-overlay/src/structure/OverlayBackground/index.tsx
@@ -0,0 +1,28 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import type { ModalOverlayProps } from '../../types'
+import commonClasses from '../common.module.scss'
+import classes from './index.module.scss'
+
+export const OverlayBackground = ({
+  children,
+  blur,
+  ...rest
+}: ModalOverlayProps) => {
+  const allClasses = classNames(
+    commonClasses.fixedPosition,
+    classes.overlayBackground
+  )
+  return (
+    <motion.div
+      style={blur ? { backdropFilter: `blur(${blur})` } : undefined}
+      className={allClasses}
+      {...rest}
+    >
+      {children}
+    </motion.div>
+  )
+}
diff --git a/packages/ui-overlay/src/structure/common.module.scss b/packages/ui-overlay/src/structure/common.module.scss
new file mode 100644
index 0000000000..e9314473f7
--- /dev/null
+++ b/packages/ui-overlay/src/structure/common.module.scss
@@ -0,0 +1,34 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.fixedPosition {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.scrollBar {
+  scrollbar-width: thin;
+  scrollbar-color: inherit transparent;
+  ::-webkit-scrollbar {
+    width: 0.1rem;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border: 0;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: transparent; /* color of the scroll thumb */
+    border-radius: 2rem; /* roundness of the scroll thumb */
+    border: 0.1rem solid transparent; /* creates padding around scroll thumb */
+  }
+}
+
+.modalMulti {
+  display: flex;
+  height: auto;
+  position: relative;
+  overflow: hidden auto;
+}
diff --git a/packages/ui-overlay/src/structure/index.tsx b/packages/ui-overlay/src/structure/index.tsx
new file mode 100644
index 0000000000..1984e35581
--- /dev/null
+++ b/packages/ui-overlay/src/structure/index.tsx
@@ -0,0 +1,23 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export * from './CanvasContainer'
+export * from './CanvasContent'
+export * from './CanvasScroll'
+export * from './index'
+export * from './ModalAddressHeader'
+export * from './ModalCard'
+export * from './ModalContainer'
+export * from './ModalContent'
+export * from './ModalCustomHeader'
+export * from './ModalFixedTitle'
+export * from './ModalMulti'
+export * from './ModalMultiThree'
+export * from './ModalMultiTwo'
+export * from './ModalNotes'
+export * from './ModalPadding'
+export * from './ModalScroll'
+export * from './ModalSection'
+export * from './ModalTitle'
+export * from './ModalWarnings'
+export * from './OverlayBackground'
diff --git a/packages/app/src/kits/Overlay/types.ts b/packages/ui-overlay/src/types.ts
similarity index 59%
rename from packages/app/src/kits/Overlay/types.ts
rename to packages/ui-overlay/src/types.ts
index 42d1bcfeea..0cbecf9558 100644
--- a/packages/app/src/kits/Overlay/types.ts
+++ b/packages/ui-overlay/src/types.ts
@@ -7,55 +7,37 @@ import type { AnimationProps } from 'framer-motion'
 export type ModalAnimationProps = ComponentBase & AnimationProps
 
 export type CanvasScrollProps = ModalAnimationProps & {
-  // the maximum width of the canvas.
   size?: 'lg' | 'xl'
-  // allow scrolling.
-  scroll?: boolean
 }
 
-export type ModalConnectItemProps = ComponentBase & {
-  // whether the item can be connected to.
-  canConnect?: boolean
+export type ModalCardProps = ComponentBase & {
+  dimmed?: boolean
 }
-
 export type ModalContentProps = ModalAnimationProps & {
-  // include canvas styling.
   canvas?: boolean
 }
 
 export type ModalFixedTitleProps = ComponentBase & {
-  // whether there is customized css.
   withStyle?: boolean
 }
 
 export type ModalNotesProps = ComponentBase & {
-  // whether there is padding vertically.
   withPadding?: boolean
 }
 
 export type ModalOverlayProps = ModalAnimationProps & {
-  // the amount of blur to apply to the backdrop.
   blur?: string
 }
 
 export type ModalPaddingProps = ComponentBase & {
-  // whether there is only vertical padding.
   verticalOnly?: boolean
-  // whether there is only horizontal padding.
   horizontalOnly?: boolean
 }
 
 export type ModalScrollProps = ComponentBase & {
-  // the maximum width.
   size: string
 }
 
 export type ModalSectionProps = ComponentBase & {
-  // the type of window (tab | carousel).
   type: 'tab' | 'carousel'
 }
-
-export type ModalWarningsProps = ComponentBase & {
-  // whether there is margin on top.
-  withMargin?: boolean
-}
diff --git a/packages/ui-overlay/tsconfig.json b/packages/ui-overlay/tsconfig.json
new file mode 100644
index 0000000000..f3a677e644
--- /dev/null
+++ b/packages/ui-overlay/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "allowJs": false,
+    "esModuleInterop": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": ["src", "../../env.d.ts"]
+}
diff --git a/packages/ui-structure/src/Main/index.module.scss b/packages/ui-structure/src/Main/index.module.scss
index 2fa5009f3c..40ff5d2d16 100644
--- a/packages/ui-structure/src/Main/index.module.scss
+++ b/packages/ui-structure/src/Main/index.module.scss
@@ -7,5 +7,5 @@
   flex-direction: column;
   max-width: 100%;
   flex: 1;
-  padding-bottom: 4.1rem
+  padding-bottom: 4.1rem;
 }
diff --git a/yarn.lock b/yarn.lock
index 02a03319df..665d8bc037 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5003,7 +5003,6 @@ __metadata:
     chroma-js: "npm:^3.1.1"
     compare-versions: "npm:^6.1.1"
     consts: "workspace:*"
-    framer-motion: "npm:^11.11.1"
     html5-qrcode: "npm:^2.3.8"
     i18next-browser-languagedetector: "npm:^8.0.2"
     locales: "workspace:*"
@@ -5011,10 +5010,8 @@ __metadata:
     polkadot-api: "npm:^1.8.0"
     qrcode-generator: "npm:1.4.4"
     rc-slider: "npm:^11.1.6"
-    react: "npm:^18.3.1"
     react-chartjs-2: "npm:^5.2.0"
     react-dom: "npm:^18.2.0"
-    react-error-boundary: "npm:^4.0.13"
     react-helmet: "npm:^6.1.0"
     react-router-dom: "npm:^7.1.1"
     react-scroll: "npm:^1.9.0"
@@ -5023,6 +5020,7 @@ __metadata:
     styles: "workspace:*"
     types: "workspace:*"
     ui-buttons: "workspace:*"
+    ui-overlay: "workspace:*"
     ui-structure: "workspace:*"
     usehooks-ts: "npm:^3.0.2"
     utils: "workspace:*"
@@ -9819,10 +9817,13 @@ __metadata:
     eslint-plugin-react: "npm:^7.37.2"
     eslint-plugin-react-hooks: "npm:^5.1.0"
     eslint-plugin-unused-imports: "npm:^4.1.4"
+    framer-motion: "npm:^11.11.1"
     globals: "npm:^15.13.0"
     i18next: "npm:^24.2.0"
     prettier: "npm:^3.4.2"
     prettier-plugin-organize-imports: "npm:^4.1.0"
+    react: "npm:^18.3.1"
+    react-error-boundary: "npm:^4.0.13"
     react-i18next: "npm:^15.4.0"
     sass: "npm:1.77.6"
     typescript: "npm:^5.7.2"
@@ -11921,6 +11922,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"ui-overlay@workspace:*, ui-overlay@workspace:packages/ui-overlay":
+  version: 0.0.0-use.local
+  resolution: "ui-overlay@workspace:packages/ui-overlay"
+  languageName: unknown
+  linkType: soft
+
 "ui-structure@workspace:*, ui-structure@workspace:packages/ui-structure":
   version: 0.0.0-use.local
   resolution: "ui-structure@workspace:packages/ui-structure"