diff --git a/packages/app/package.json b/packages/app/package.json
index 92d1c098eb..b690289ec3 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -43,6 +43,7 @@
     "chart.js": "^4.4.4",
     "chroma-js": "^3.1.1",
     "compare-versions": "^6.1.1",
+    "consts": "workspace:*",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.11.1",
     "html5-qrcode": "^2.3.8",
@@ -61,7 +62,9 @@
     "react-router-dom": "^6.23.1",
     "react-scroll": "^1.9.0",
     "styled-components": "^6.1.13",
+    "styles": "workspace:*",
     "ui-buttons": "workspace:*",
+    "ui-structure": "workspace:*",
     "usehooks-ts": "^3.0.2",
     "viem": "^2.21.35",
     "wagmi": "^2.12.25",
diff --git a/packages/app/src/Page.tsx b/packages/app/src/PageWithTitle.tsx
similarity index 80%
rename from packages/app/src/Page.tsx
rename to packages/app/src/PageWithTitle.tsx
index ac396c3ff0..453a0b292f 100644
--- a/packages/app/src/Page.tsx
+++ b/packages/app/src/PageWithTitle.tsx
@@ -4,16 +4,16 @@
 import { useNetwork } from 'contexts/Network';
 import { Helmet } from 'react-helmet';
 import type { PageItem } from 'types';
-import { PageWrapper } from 'kits/Structure/Page/Wrapper';
+import { Page } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 
-export const Page = ({ page }: { page: PageItem }) => {
+export const PageWithTitle = ({ page }: { page: PageItem }) => {
   const { t } = useTranslation();
   const { network } = useNetwork();
   const { Entry, key } = page;
 
   return (
-    <PageWrapper>
+    <Page>
       <Helmet>
         <title>{`${t('title', {
           context: `${network}`,
@@ -21,6 +21,6 @@ export const Page = ({ page }: { page: PageItem }) => {
         })} : ${t(key, { ns: 'base' })}`}</title>
       </Helmet>
       <Entry page={page} />
-    </PageWrapper>
+    </Page>
   );
 };
diff --git a/packages/app/src/Router.tsx b/packages/app/src/Router.tsx
index 419e09f3c3..7b0bde7a04 100644
--- a/packages/app/src/Router.tsx
+++ b/packages/app/src/Router.tsx
@@ -29,9 +29,8 @@ import { useOtherAccounts } from 'contexts/Connect/OtherAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { Notifications } from 'library/Notifications';
 import { NotificationsController } from 'controllers/Notifications';
-import { Page } from 'Page';
-import { Body } from 'kits/Structure/Body';
-import { Main } from 'kits/Structure/Main';
+import { PageWithTitle } from 'PageWithTitle';
+import { Body, Main } from 'ui-structure';
 import { Offline } from 'library/Offline';
 
 const RouterInner = () => {
@@ -115,7 +114,7 @@ const RouterInner = () => {
                 <Route
                   key={`main_interface_page_${i}`}
                   path={page.hash}
-                  element={<Page page={page} />}
+                  element={<PageWithTitle page={page} />}
                 />
               ))}
 
diff --git a/packages/app/src/Themes.tsx b/packages/app/src/Themes.tsx
index 1edf4043c2..8d2dcb478c 100644
--- a/packages/app/src/Themes.tsx
+++ b/packages/app/src/Themes.tsx
@@ -6,7 +6,7 @@ import { Router } from 'Router';
 import { useTheme } from 'contexts/Themes';
 import { useNetwork } from 'contexts/Network';
 import { useEffect } from 'react';
-import { Entry } from 'kits/Structure/Entry';
+import { Entry } from 'ui-structure';
 
 // light / dark `mode` added to styled-components provider
 export const ThemedRouter = () => {
diff --git a/packages/app/src/canvas/JoinPool/Header.tsx b/packages/app/src/canvas/JoinPool/Header.tsx
index 9f1555ac09..b3014ab9e3 100644
--- a/packages/app/src/canvas/JoinPool/Header.tsx
+++ b/packages/app/src/canvas/JoinPool/Header.tsx
@@ -9,7 +9,7 @@ import {
 import { ButtonPrimary, ButtonPrimaryInvert } from 'ui-buttons';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
+import { PageTitleTabs } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useOverlay } from 'kits/Overlay/Provider';
 import type { JoinPoolHeaderProps } from './types';
diff --git a/packages/app/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/packages/app/src/canvas/JoinPool/Overview/PerformanceGraph.tsx
index f286da88f1..84a1c8869b 100644
--- a/packages/app/src/canvas/JoinPool/Overview/PerformanceGraph.tsx
+++ b/packages/app/src/canvas/JoinPool/Overview/PerformanceGraph.tsx
@@ -17,7 +17,7 @@ import { GraphWrapper, HeadingWrapper } from '../Wrappers';
 import { Line } from 'react-chartjs-2';
 import BigNumber from 'bignumber.js';
 import type { AnyJson } from '@w3ux/types';
-import { graphColors } from 'theme/graphs';
+import graphColors from 'styles/graphs/index.json';
 import { useTheme } from 'contexts/Themes';
 import { ButtonHelp } from 'ui-buttons';
 import { useHelp } from 'contexts/Help';
diff --git a/packages/app/src/config/networks.ts b/packages/app/src/config/networks.ts
index dcf11f040d..f256dec60b 100644
--- a/packages/app/src/config/networks.ts
+++ b/packages/app/src/config/networks.ts
@@ -190,7 +190,7 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 10,
     unit: 'DOT',
     endpoints: {
-      lightClient: 'people_polkadot', // NOTE: Currently not being used. TODO: Revise this and activate once People chain specs are available to use.
+      lightClient: 'polkadot_people',
       rpcEndpoints: {
         Parity: 'wss://polkadot-people-rpc.polkadot.io',
       },
@@ -202,7 +202,7 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 12,
     unit: 'KSM',
     endpoints: {
-      lightClient: 'people_kusama', // NOTE: Currently not being used. TODO: Revise this and activate once People chain specs are available to use.
+      lightClient: 'kusama_people',
       rpcEndpoints: {
         Parity: 'wss://kusama-people-rpc.polkadot.io',
       },
@@ -214,7 +214,7 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 12,
     unit: 'WND',
     endpoints: {
-      lightClient: 'people_westend', // NOTE: Currently not being used. TODO: Revise this and activate once People chain specs are available to use.
+      lightClient: 'westend_people',
       rpcEndpoints: {
         Parity: 'wss://westend-people-rpc.polkadot.io',
       },
diff --git a/packages/app/src/controllers/Subscriptions/types.ts b/packages/app/src/controllers/Subscriptions/types.ts
index f97f822f31..c050a3fc74 100644
--- a/packages/app/src/controllers/Subscriptions/types.ts
+++ b/packages/app/src/controllers/Subscriptions/types.ts
@@ -1,11 +1,19 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { AnyJson } from '@w3ux/types';
+import type { ActiveEra } from 'model/Subscribe/ActiveEra';
+import type { BlockNumber } from 'model/Subscribe/BlockNumber';
+import type { NetworkMetrics } from 'model/Subscribe/NetworkMetrics';
+import type { PoolsConfig } from 'model/Subscribe/PoolsConfig';
+import type { StakingMetrics } from 'model/Subscribe/StakingMetrics';
 
 // Define all possible subscription classes.
-// TODO: Add subscription classes here.
-export type Subscription = AnyJson;
+export type Subscription =
+  | ActiveEra
+  | BlockNumber
+  | NetworkMetrics
+  | PoolsConfig
+  | StakingMetrics;
 
 // the record of subscriptions, keyed by tabId.
 export type ChainSubscriptions = Record<string, Subscription>;
diff --git a/packages/app/src/kits/Structure/ButtonRow/index.tsx b/packages/app/src/kits/Structure/ButtonRow/index.tsx
deleted file mode 100644
index 1a3ba0daeb..0000000000
--- a/packages/app/src/kits/Structure/ButtonRow/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
-
-export type RowProps = ComponentBase & {
-  // whether there is margin space vertically.
-  yMargin?: boolean;
-};
-
-/**
- * @name ButtonRow
- * @summary A flex container for a row of buttons.
- */
-export const ButtonRow = ({ children, style, yMargin }: RowProps) => (
-  <Wrapper className={yMargin ? 'y-margin' : undefined} style={style}>
-    {children}
-  </Wrapper>
-);
diff --git a/packages/app/src/kits/Structure/Page/Wrapper.ts b/packages/app/src/kits/Structure/Page/Wrapper.ts
deleted file mode 100644
index 702b60a89b..0000000000
--- a/packages/app/src/kits/Structure/Page/Wrapper.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { MaxPageWidth } from 'consts';
-import styled from 'styled-components';
-
-export const PageWrapper = styled.div`
-  max-width: ${MaxPageWidth}px;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 4.5rem;
-  width: 100%;
-  margin: 0 auto;
-`;
diff --git a/packages/app/src/kits/Structure/PageRow/index.tsx b/packages/app/src/kits/Structure/PageRow/index.tsx
deleted file mode 100644
index 0d1f5f8a76..0000000000
--- a/packages/app/src/kits/Structure/PageRow/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { RowProps } from '../ButtonRow';
-import { appendOrEmpty } from '@w3ux/utils';
-import { Wrapper } from './Wrapper';
-
-/**
- * @name PageRow
- * @summary Used to separate page content based on rows. Commonly used with `RowPrimary` and
- * `RowSecondary`.
- */
-export const PageRow = ({ children, style, yMargin }: RowProps) => (
-  <Wrapper
-    className={`page-padding${appendOrEmpty(yMargin, 'y-margin')}`}
-    style={style}
-  >
-    {children}
-  </Wrapper>
-);
diff --git a/packages/app/src/kits/Structure/PageTitle/Wrappers.ts b/packages/app/src/kits/Structure/PageTitle/Wrappers.ts
deleted file mode 100644
index 91beaf2707..0000000000
--- a/packages/app/src/kits/Structure/PageTitle/Wrappers.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { PageWidthMediumThreshold } from 'consts';
-import styled from 'styled-components';
-
-export const ScrollableWrapper = styled.div`
-  background: var(--background-default);
-  display: none;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 4rem;
-  z-index: 4;
-
-  @media (max-width: ${PageWidthMediumThreshold}px) {
-    display: block;
-  }
-`;
-
-export const PageTitleWrapper = styled.header`
-  background: var(--background-default);
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-end;
-  position: sticky;
-  margin-top: 5rem;
-  margin-bottom: 0.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0;
-  top: 0;
-  transition: padding 0.3s ease-out;
-  width: 100%;
-  z-index: 5;
-
-  @media (max-width: ${PageWidthMediumThreshold}px) {
-    top: 4rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.5rem;
-    margin-bottom: 0;
-  }
-
-  .title {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    width: 100%;
-    margin-bottom: 0.5rem;
-
-    @media (max-width: ${PageWidthMediumThreshold}px) {
-      margin-bottom: 0.5rem;
-    }
-
-    > .right {
-      padding-left: 1rem;
-      flex-grow: 1;
-    }
-  }
-
-  h1 {
-    font-size: 2rem;
-    font-family: Poppins700, sans-serif;
-    font-weight: 700;
-    position: relative;
-    transform: scale(1);
-    left: 0;
-
-    @media (max-width: ${PageWidthMediumThreshold}px) {
-      left: 0rem;
-      transform: scale(0.9);
-    }
-
-    transition: all var(--transition-duration);
-    margin: 0;
-  }
-
-  &.sticky {
-    padding-top: 1.5rem;
-    padding-bottom: 0.25rem;
-    margin-bottom: 0.25rem;
-
-    .title {
-      margin-bottom: 0.5rem;
-
-      h1 {
-        transform: scale(0.85);
-        left: -0.75rem;
-      }
-    }
-  }
-`;
diff --git a/packages/app/src/kits/Structure/PageTitle/types.ts b/packages/app/src/kits/Structure/PageTitle/types.ts
deleted file mode 100644
index a33fcc0712..0000000000
--- a/packages/app/src/kits/Structure/PageTitle/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { PageTitleTabsProps } from '../PageTitleTabs/types';
-
-export type PageTitleProps = PageTitleTabsProps & {
-  colorSecondary?: boolean;
-  tabClassName?: string;
-  inline?: boolean;
-  title?: string;
-  button?: {
-    title: string;
-    onClick: () => void;
-  };
-};
diff --git a/packages/app/src/kits/Structure/PageTitleTabs/Wrapper.ts b/packages/app/src/kits/Structure/PageTitleTabs/Wrapper.ts
deleted file mode 100644
index 254f01f05c..0000000000
--- a/packages/app/src/kits/Structure/PageTitleTabs/Wrapper.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { PageWidthMediumThreshold } from 'consts';
-import styled from 'styled-components';
-
-export const Wrapper = styled.section`
-  border-bottom: 1px solid var(--border-primary-color);
-  overflow: hidden;
-  height: 3.6rem;
-  margin-top: 0.9rem;
-  max-width: 100%;
-
-  &.inline {
-    border-bottom: none;
-  }
-
-  @media (max-width: ${PageWidthMediumThreshold}px) {
-    margin-top: 0.5rem;
-  }
-
-  > .scroll {
-    @include m.hide-scrollbar;
-
-    width: 100%;
-    height: 4.5rem;
-    overflow: auto hidden;
-  }
-
-  .inner {
-    display: flex;
-  }
-
-  &.sticky {
-    border-bottom: 0;
-    margin-top: 0.5rem;
-  }
-`;
diff --git a/packages/app/src/kits/Structure/PageTitleTabs/index.tsx b/packages/app/src/kits/Structure/PageTitleTabs/index.tsx
deleted file mode 100644
index d934cafcbd..0000000000
--- a/packages/app/src/kits/Structure/PageTitleTabs/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { ButtonTab } from 'ui-buttons';
-import type { PageTitleProps } from '../PageTitle/types';
-import type { PageTitleTabProps } from './types';
-import { appendOrEmpty } from '@w3ux/utils';
-import { Wrapper } from './Wrapper';
-
-/**
- * @name PageTitleTabs
- * @summary The element in a page title. Inculding the ButtonTab.
- */
-export const PageTitleTabs = ({
-  sticky,
-  tabs = [],
-  inline = false,
-  tabClassName,
-  colorSecondary,
-}: PageTitleProps) => (
-  <Wrapper
-    className={`${appendOrEmpty(sticky, 'sticky')} ${inline ? 'inline' : undefined}`}
-  >
-    <div className="scroll">
-      <div className="inner">
-        {tabs.map(
-          (
-            { active, onClick, title, badge, disabled }: PageTitleTabProps,
-            i: number
-          ) => (
-            <ButtonTab
-              className={tabClassName}
-              active={!!active}
-              key={`page_tab_${i}`}
-              onClick={() => onClick()}
-              title={title}
-              colorSecondary={colorSecondary}
-              badge={badge}
-              disabled={disabled === undefined ? false : disabled}
-            />
-          )
-        )}
-      </div>
-    </div>
-  </Wrapper>
-);
diff --git a/packages/app/src/kits/Structure/RowSection/Wrappers.ts b/packages/app/src/kits/Structure/RowSection/Wrappers.ts
deleted file mode 100644
index a248a4c551..0000000000
--- a/packages/app/src/kits/Structure/RowSection/Wrappers.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { SectionFullWidthThreshold, PageWidthMediumThreshold } from 'consts';
-import styled from 'styled-components';
-
-export const RowPrimaryWrapper = styled.div`
-  &.first {
-    @media (min-width: ${PageWidthMediumThreshold}px) {
-      padding-left: 0.75rem;
-      order: 1;
-    }
-  }
-
-  &.last {
-    @media (min-width: ${PageWidthMediumThreshold}px) {
-      padding-right: 0.75rem;
-    }
-  }
-
-  order: 0;
-  flex: 1;
-  flex-basis: 100%;
-  max-width: 100%;
-
-  @media (min-width: ${PageWidthMediumThreshold}px) {
-    order: 0;
-    flex: 1;
-    flex-basis: 56%;
-    width: 56%;
-  }
-
-  @media (min-width: ${SectionFullWidthThreshold + 400}px) {
-    flex-basis: 62%;
-    width: 62%;
-  }
-
-  &.v-last {
-    order: 1;
-  }
-`;
-
-export const RowSecondaryWrapper = styled.div`
-  &.first {
-    @media (min-width: ${PageWidthMediumThreshold}px) {
-      padding-left: 0.75rem;
-      order: 1;
-    }
-  }
-  &.last {
-    @media (min-width: ${PageWidthMediumThreshold}px) {
-      padding-right: 0.75rem;
-    }
-  }
-
-  order: 0;
-  flex-basis: 100%;
-  width: 100%;
-  border-radius: 1rem;
-
-  &.v-last {
-    order: 1;
-  }
-
-  @media (min-width: ${PageWidthMediumThreshold}px) {
-    order: 0;
-    flex: 1;
-    flex-basis: 44%;
-    width: 44%;
-    max-width: none;
-  }
-
-  @media (min-width: ${SectionFullWidthThreshold + 400}px) {
-    flex-basis: 38%;
-    max-width: 38%;
-  }
-`;
diff --git a/packages/app/src/kits/Structure/RowSection/index.tsx b/packages/app/src/kits/Structure/RowSection/index.tsx
deleted file mode 100644
index e28a1c18f9..0000000000
--- a/packages/app/src/kits/Structure/RowSection/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { appendOr, appendOrEmpty } from '@w3ux/utils';
-import type { ComponentBase } from '@w3ux/types';
-import { RowPrimaryWrapper, RowSecondaryWrapper } from './Wrappers';
-
-export type RowSectionProps = ComponentBase & {
-  // the css order of the component for vertical layouts.
-  vLast?: boolean;
-  // true means padding on the left and false means padding on the right.
-  hLast?: boolean;
-  // true means the secondary element and  false means the primary one.
-  secondary?: boolean;
-};
-
-/**
- * @name RowSection
- * @summary The primary/secondary module in a PageRow.
- */
-export const RowSection = ({
-  children,
-  style,
-  vLast,
-  hLast,
-  secondary,
-}: RowSectionProps) => {
-  const Wrapper = secondary ? RowSecondaryWrapper : RowPrimaryWrapper;
-
-  return (
-    <Wrapper
-      className={`${appendOrEmpty(vLast, 'v-last')}${appendOr(hLast, 'first', 'last')}`}
-      style={style}
-    >
-      {children}
-    </Wrapper>
-  );
-};
diff --git a/packages/app/src/kits/Structure/Side/index.tsx b/packages/app/src/kits/Structure/Side/index.tsx
deleted file mode 100644
index c133c7804b..0000000000
--- a/packages/app/src/kits/Structure/Side/index.tsx
+++ /dev/null
@@ -1,44 +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 { CSSProperties } from 'react';
-import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
-
-export type SideProps = ComponentBase & {
-  // whether the side menu should be open on smaller screens.
-  open: boolean;
-  // whether side menu is in minimised state.
-  minimised: boolean;
-  // optional width property to be applied to maximised side.
-  width?: string | number;
-};
-
-/**
- * @name Side
- * @summary An element that houses the side menu and transitions to a toggle-able fixed overlay
- * on smaller screens.
- * @summary Handles maximised and minimised transitions.
- */
-export const Side = ({
-  children,
-  style,
-  open,
-  minimised,
-  width = '20rem',
-}: SideProps) => {
-  const vars = { '--core-side-width': width } as CSSProperties;
-
-  return (
-    <Wrapper
-      style={{ ...vars, ...style }}
-      className={`${appendOrEmpty(!open, 'hidden')}${appendOrEmpty(
-        minimised,
-        'minimised'
-      )}`}
-    >
-      {children}
-    </Wrapper>
-  );
-};
diff --git a/packages/app/src/kits/Structure/index.scss b/packages/app/src/kits/Structure/index.scss
deleted file mode 100644
index 629a2e2259..0000000000
--- a/packages/app/src/kits/Structure/index.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-.page-padding {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-
-  /* NOTE: same as `PageWidthSmallThreshold` + 1 constant in `src/consts.ts`. */
-  @media (min-width: 826px) {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-  }
-
-  /* NOTE: same as `PageWidthSmallThreshold` + 1 constant in `src/consts.ts`. */
-  @media (min-width: 826px) {
-    padding: 0 5rem 0 2.5rem;
-  }
-}
diff --git a/packages/app/src/library/Graphs/EraPoints.tsx b/packages/app/src/library/Graphs/EraPoints.tsx
index bfe89c2c03..7cd8957adf 100644
--- a/packages/app/src/library/Graphs/EraPoints.tsx
+++ b/packages/app/src/library/Graphs/EraPoints.tsx
@@ -14,7 +14,7 @@ import {
 import { Line } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from 'contexts/Themes';
-import { graphColors } from 'theme/graphs';
+import graphColors from 'styles/graphs/index.json';
 import { useNetwork } from 'contexts/Network';
 import type { EraPointsProps } from './types';
 import type { AnyJson } from '@w3ux/types';
diff --git a/packages/app/src/library/Graphs/GeoDonut.tsx b/packages/app/src/library/Graphs/GeoDonut.tsx
index d708d701a0..3970ece96d 100644
--- a/packages/app/src/library/Graphs/GeoDonut.tsx
+++ b/packages/app/src/library/Graphs/GeoDonut.tsx
@@ -4,7 +4,7 @@
 import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js';
 import { Doughnut } from 'react-chartjs-2';
 import { useTheme } from 'contexts/Themes';
-import { graphColors } from 'theme/graphs';
+import graphColors from 'styles/graphs/index.json';
 import chroma from 'chroma-js';
 import { ellipsisFn } from '@w3ux/utils';
 import { useNetwork } from 'contexts/Network';
diff --git a/packages/app/src/library/Graphs/PayoutBar.tsx b/packages/app/src/library/Graphs/PayoutBar.tsx
index 1cbca86b6a..5b5d0b5343 100644
--- a/packages/app/src/library/Graphs/PayoutBar.tsx
+++ b/packages/app/src/library/Graphs/PayoutBar.tsx
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { useStaking } from 'contexts/Staking';
 import { useTheme } from 'contexts/Themes';
 import { DefaultLocale, locales } from 'locale';
-import { graphColors } from 'theme/graphs';
+import graphColors from 'styles/graphs/index.json';
 import type { AnySubscan } from 'types';
 import { useNetwork } from 'contexts/Network';
 import type { PayoutBarProps } from './types';
diff --git a/packages/app/src/library/Graphs/PayoutLine.tsx b/packages/app/src/library/Graphs/PayoutLine.tsx
index 8df265c12f..e705f40995 100644
--- a/packages/app/src/library/Graphs/PayoutLine.tsx
+++ b/packages/app/src/library/Graphs/PayoutLine.tsx
@@ -16,7 +16,7 @@ import { Line } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useStaking } from 'contexts/Staking';
 import { useTheme } from 'contexts/Themes';
-import { graphColors } from 'theme/graphs';
+import graphColors from 'styles/graphs/index.json';
 import type { AnySubscan } from 'types';
 import { useNetwork } from 'contexts/Network';
 import type { PayoutLineProps } from './types';
diff --git a/packages/app/src/library/Headers/Wrappers.ts b/packages/app/src/library/Headers/Wrappers.ts
index 6ec95b658e..f99421cf67 100644
--- a/packages/app/src/library/Headers/Wrappers.ts
+++ b/packages/app/src/library/Headers/Wrappers.ts
@@ -3,7 +3,7 @@
 
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
-import { PageWidthSmallThreshold, PageWidthMediumThreshold } from 'consts';
+import { PageWidthMediumThreshold } from 'consts';
 
 export const Wrapper = styled.div`
   position: fixed;
@@ -130,7 +130,7 @@ export const ItemInactive = styled(motion.div)`
 
 export const LargeScreensOnly = styled.div`
   display: flex;
-  @media (max-width: ${PageWidthSmallThreshold}px) {
+  @media (max-width: 850px) {
     display: none;
   }
 `;
diff --git a/packages/app/src/library/SideMenu/index.tsx b/packages/app/src/library/SideMenu/index.tsx
index c25c3bc0cf..3c26ced30c 100644
--- a/packages/app/src/library/SideMenu/index.tsx
+++ b/packages/app/src/library/SideMenu/index.tsx
@@ -26,7 +26,7 @@ import { Main } from './Main';
 import { Secondary } from './Secondary';
 import { ConnectionSymbol, Separator, Wrapper } from './Wrapper';
 import { useOutsideAlerter, useOnResize } from '@w3ux/hooks';
-import { Side } from 'kits/Structure/Side';
+import { Side } from 'ui-structure';
 
 export const SideMenu = () => {
   const { t } = useTranslation('base');
diff --git a/packages/app/src/library/StatBoxList/index.tsx b/packages/app/src/library/StatBoxList/index.tsx
index 09c18570bd..b0bdd686c8 100644
--- a/packages/app/src/library/StatBoxList/index.tsx
+++ b/packages/app/src/library/StatBoxList/index.tsx
@@ -3,7 +3,7 @@
 
 import type { ReactNode } from 'react';
 import { ListWrapper } from './Wrapper';
-import { StatBoxRow } from 'kits/Structure/StatBoxRow';
+import { StatBoxRow } from 'ui-structure';
 
 export const StatBoxList = ({ children }: { children: ReactNode }) => (
   <StatBoxRow>
diff --git a/packages/app/src/library/SubmitTx/index.tsx b/packages/app/src/library/SubmitTx/index.tsx
index cca88368dc..fb15f09faf 100644
--- a/packages/app/src/library/SubmitTx/index.tsx
+++ b/packages/app/src/library/SubmitTx/index.tsx
@@ -12,7 +12,7 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { Default } from './Default';
 import { ManualSign } from './ManualSign';
 import type { SubmitTxProps } from './types';
-import { Tx } from 'kits/Structure/Tx';
+import { Tx } from 'library/Tx';
 
 export const SubmitTx = ({
   uid,
diff --git a/packages/app/src/kits/Structure/Tx/Signer.tsx b/packages/app/src/library/Tx/Signer.tsx
similarity index 100%
rename from packages/app/src/kits/Structure/Tx/Signer.tsx
rename to packages/app/src/library/Tx/Signer.tsx
diff --git a/packages/app/src/kits/Structure/Tx/Wrapper.ts b/packages/app/src/library/Tx/Wrapper.ts
similarity index 100%
rename from packages/app/src/kits/Structure/Tx/Wrapper.ts
rename to packages/app/src/library/Tx/Wrapper.ts
diff --git a/packages/app/src/kits/Structure/Tx/index.tsx b/packages/app/src/library/Tx/index.tsx
similarity index 100%
rename from packages/app/src/kits/Structure/Tx/index.tsx
rename to packages/app/src/library/Tx/index.tsx
diff --git a/packages/app/src/kits/Structure/Tx/types.ts b/packages/app/src/library/Tx/types.ts
similarity index 100%
rename from packages/app/src/kits/Structure/Tx/types.ts
rename to packages/app/src/library/Tx/types.ts
diff --git a/packages/app/src/library/WithdrawPrompt/index.tsx b/packages/app/src/library/WithdrawPrompt/index.tsx
index 89b7a42014..c553910bd3 100644
--- a/packages/app/src/library/WithdrawPrompt/index.tsx
+++ b/packages/app/src/library/WithdrawPrompt/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faLockOpen } from '@fortawesome/free-solid-svg-icons';
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow, ButtonRow } from 'ui-structure';
 import { useTheme } from 'contexts/Themes';
 import { useTransferOptions } from 'contexts/TransferOptions';
 import { CardWrapper } from 'library/Card/Wrappers';
@@ -11,7 +11,6 @@ import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonPrimary } from 'ui-buttons';
-import { ButtonRow } from 'kits/Structure/ButtonRow';
 import { timeleftAsString } from 'hooks/useTimeLeft/utils';
 import { getUnixTime } from 'date-fns';
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft';
diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
index 3b91aeacbb..57a475c5dd 100644
--- a/packages/app/src/main.tsx
+++ b/packages/app/src/main.tsx
@@ -5,17 +5,16 @@ import { createRoot } from 'react-dom/client';
 import { App } from 'App';
 
 // Network styles.
-import 'theme/accents/polkadot-relay.css';
-import 'theme/accents/kusama-relay.css';
-import 'theme/accents/westend-relay.css';
+import 'styles/accents/polkadot-relay.css';
+import 'styles/accents/kusama-relay.css';
+import 'styles/accents/westend-relay.css';
 
 // App styles.
-import 'theme/fonts.scss';
-import 'theme/theme.scss';
-import 'theme/index.scss';
+import 'styles/fonts/font.scss';
+import 'styles/theme/theme.scss';
+import 'styles/theme/index.scss';
 
 // Library styles.
-import 'kits/Structure/index.scss';
 import 'kits/Overlay/index.scss';
 
 const rootElement = document.getElementById('root');
diff --git a/packages/app/src/model/Query/StakingConstants/index.ts b/packages/app/src/model/Query/StakingConstants/index.ts
index 3d908bd356..e68ff841e6 100644
--- a/packages/app/src/model/Query/StakingConstants/index.ts
+++ b/packages/app/src/model/Query/StakingConstants/index.ts
@@ -12,7 +12,6 @@ export class StakingConstants {
   // ------------------------------------------------------
 
   // Network config fallback values.
-  // TODO: Explore how these values can be removed.
   FALLBACK = {
     MAX_NOMINATIONS: new BigNumber(16),
     BONDING_DURATION: new BigNumber(28),
diff --git a/packages/app/src/pages/Community/Entity.tsx b/packages/app/src/pages/Community/Entity.tsx
index 5007e6fe76..53e90cfbfa 100644
--- a/packages/app/src/pages/Community/Entity.tsx
+++ b/packages/app/src/pages/Community/Entity.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow, PageHeading } from 'ui-structure';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
@@ -15,7 +15,6 @@ import { ItemsWrapper } from './Wrappers';
 import { useCommunitySections } from './context';
 import type { Validator } from 'contexts/Validators/types';
 import { ButtonSecondary } from 'ui-buttons';
-import { PageHeadingWrapper } from 'kits/Structure/PageHeading/Wrapper';
 
 export const Entity = () => {
   const { t } = useTranslation('pages');
@@ -56,14 +55,14 @@ export const Entity = () => {
 
   return (
     <PageRow>
-      <PageHeadingWrapper>
+      <PageHeading>
         <ButtonSecondary
           text={t('community.goBack')}
           iconLeft={faChevronLeft}
           iconTransform="shrink-3"
           onClick={() => setActiveSection(0)}
         />
-      </PageHeadingWrapper>
+      </PageHeading>
       <ItemsWrapper variants={container} initial="hidden" animate="show">
         <Item item={activeItem} actionable={false} />
       </ItemsWrapper>
diff --git a/packages/app/src/pages/Community/List.tsx b/packages/app/src/pages/Community/List.tsx
index e918a9ee40..2fb48afdb9 100644
--- a/packages/app/src/pages/Community/List.tsx
+++ b/packages/app/src/pages/Community/List.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow } from 'ui-structure';
 import { useEffect, useState } from 'react';
 import { useNetwork } from 'contexts/Network';
 import { Item } from './Item';
diff --git a/packages/app/src/pages/Community/index.tsx b/packages/app/src/pages/Community/index.tsx
index 327cc686b6..fb4aa1cc64 100644
--- a/packages/app/src/pages/Community/index.tsx
+++ b/packages/app/src/pages/Community/index.tsx
@@ -7,7 +7,7 @@ import { Entity } from './Entity';
 import { List } from './List';
 import { Wrapper } from './Wrappers';
 import { CommunitySectionsProvider, useCommunitySections } from './context';
-import { PageTitle } from 'kits/Structure/PageTitle';
+import { PageTitle } from 'ui-structure';
 
 export const CommunityInner = ({ page }: PageProps) => {
   const { t } = useTranslation('base');
diff --git a/packages/app/src/pages/Nominate/Active/ManageBond.tsx b/packages/app/src/pages/Nominate/Active/ManageBond.tsx
index ee512d1a74..cf2fa48da4 100644
--- a/packages/app/src/pages/Nominate/Active/ManageBond.tsx
+++ b/packages/app/src/pages/Nominate/Active/ManageBond.tsx
@@ -19,7 +19,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons';
-import { ButtonRow } from 'kits/Structure/ButtonRow';
+import { ButtonRow } from 'ui-structure';
 import { planckToUnitBn } from 'library/Utils';
 
 export const ManageBond = () => {
diff --git a/packages/app/src/pages/Nominate/Active/Status/index.tsx b/packages/app/src/pages/Nominate/Active/Status/index.tsx
index 41920c631f..d9fa6f6d5c 100644
--- a/packages/app/src/pages/Nominate/Active/Status/index.tsx
+++ b/packages/app/src/pages/Nominate/Active/Status/index.tsx
@@ -5,7 +5,7 @@ import { CardWrapper } from 'library/Card/Wrappers';
 import { UnclaimedPayoutsStatus } from './UnclaimedPayoutsStatus';
 import { NominationStatus } from './NominationStatus';
 import { PayoutDestinationStatus } from './PayoutDestinationStatus';
-import { Separator } from 'kits/Structure/Separator';
+import { Separator } from 'ui-structure';
 import { useSyncing } from 'hooks/useSyncing';
 import { useStaking } from 'contexts/Staking';
 import { NewNominator } from './NewNominator';
diff --git a/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx b/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx
index 552de93b13..6c9348f2d3 100644
--- a/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx
+++ b/packages/app/src/pages/Nominate/Active/UnstakePrompts.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faBolt, faLockOpen } from '@fortawesome/free-solid-svg-icons';
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow, ButtonRow } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from 'contexts/Themes';
 import { useTransferOptions } from 'contexts/TransferOptions';
@@ -13,7 +13,6 @@ import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonPrimary } from 'ui-buttons';
-import { ButtonRow } from 'kits/Structure/ButtonRow';
 
 export const UnstakePrompts = () => {
   const { t } = useTranslation('pages');
diff --git a/packages/app/src/pages/Nominate/Active/index.tsx b/packages/app/src/pages/Nominate/Active/index.tsx
index 4ea875d9ba..303f18df93 100644
--- a/packages/app/src/pages/Nominate/Active/index.tsx
+++ b/packages/app/src/pages/Nominate/Active/index.tsx
@@ -22,8 +22,7 @@ import { UnstakePrompts } from './UnstakePrompts';
 import { useSyncing } from 'hooks/useSyncing';
 import { useBalances } from 'contexts/Balances';
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons';
-import { PageRow } from 'kits/Structure/PageRow';
-import { RowSection } from 'kits/Structure/RowSection';
+import { PageRow, RowSection } from 'ui-structure';
 import { WithdrawPrompt } from 'library/WithdrawPrompt';
 
 export const Active = () => {
diff --git a/packages/app/src/pages/Nominate/NominationGeo/NominationGeoList/index.tsx b/packages/app/src/pages/Nominate/NominationGeo/NominationGeoList/index.tsx
index 33cf8603d7..4eac44464f 100644
--- a/packages/app/src/pages/Nominate/NominationGeo/NominationGeoList/index.tsx
+++ b/packages/app/src/pages/Nominate/NominationGeo/NominationGeoList/index.tsx
@@ -6,7 +6,7 @@ import { Header, List, Wrapper as ListWrapper } from 'library/List';
 import { MotionContainer } from 'library/List/MotionContainer';
 import type { NomninationGeoListProps } from '../types';
 import { useNetwork } from 'contexts/Network';
-import { Separator } from 'kits/Structure/Separator';
+import { Separator } from 'ui-structure';
 import { ButtonPrimaryInvert, ButtonHelp } from 'ui-buttons';
 import { useStaking } from 'contexts/Staking';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
diff --git a/packages/app/src/pages/Nominate/NominationGeo/index.tsx b/packages/app/src/pages/Nominate/NominationGeo/index.tsx
index 10df873f26..c855d2c16e 100644
--- a/packages/app/src/pages/Nominate/NominationGeo/index.tsx
+++ b/packages/app/src/pages/Nominate/NominationGeo/index.tsx
@@ -17,7 +17,7 @@ import { AnalyzedPayouts } from './Stats/AnalyzedPayouts';
 import { AnalyzedDays } from './Stats/AnalyzedDays';
 import { AnalyzedEras } from './Stats/AnalyzedEras';
 
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow } from 'ui-structure';
 import { CardHeaderWrapper, CardWrapper } from 'library/Card/Wrappers';
 import { PluginLabel } from 'library/PluginLabel';
 import { GraphWrapper } from 'library/Graphs/Wrapper';
diff --git a/packages/app/src/pages/Nominate/index.tsx b/packages/app/src/pages/Nominate/index.tsx
index 8bcc847a34..e1d9251c31 100644
--- a/packages/app/src/pages/Nominate/index.tsx
+++ b/packages/app/src/pages/Nominate/index.tsx
@@ -4,9 +4,8 @@
 import { Active } from './Active';
 import { NominationGeo } from './NominationGeo';
 import { Wrapper } from './Wrappers';
-import { PageTitle } from '../../kits/Structure/PageTitle';
+import { PageTitle } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
-import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types';
 import { useEffect, useState } from 'react';
 import { usePlugins } from 'contexts/Plugins';
 
@@ -16,23 +15,6 @@ export const Nominate = () => {
 
   const [activeTab, setActiveTab] = useState<number>(0);
 
-  // Only include tabs if the Polkawatch plugin is enabled.
-  let tabs: PageTitleTabProps[] | undefined = undefined;
-  if (pluginEnabled('polkawatch')) {
-    tabs = [
-      {
-        title: t('overview', { ns: 'base' }),
-        active: activeTab === 0,
-        onClick: () => setActiveTab(0),
-      },
-      {
-        title: t('decentralization', { ns: 'base' }),
-        active: activeTab === 1,
-        onClick: () => setActiveTab(1),
-      },
-    ];
-  }
-
   // Go back to the first tab if the Polkawatch plugin is disabled.
   useEffect(() => {
     if (!pluginEnabled('polkawatch')) {
@@ -42,7 +24,25 @@ export const Nominate = () => {
 
   return (
     <Wrapper>
-      <PageTitle title={t('nominate.nominate', { ns: 'pages' })} tabs={tabs} />
+      <PageTitle
+        title={t('nominate.nominate', { ns: 'pages' })}
+        tabs={
+          pluginEnabled('polkawatch')
+            ? [
+                {
+                  title: t('overview', { ns: 'base' }),
+                  active: activeTab === 0,
+                  onClick: () => setActiveTab(0),
+                },
+                {
+                  title: t('decentralization', { ns: 'base' }),
+                  active: activeTab === 1,
+                  onClick: () => setActiveTab(1),
+                },
+              ]
+            : undefined
+        }
+      />
       {activeTab == 0 && <Active />}
       {activeTab == 1 && <NominationGeo />}
     </Wrapper>
diff --git a/packages/app/src/pages/Overview/BalanceLinks.tsx b/packages/app/src/pages/Overview/BalanceLinks.tsx
index 35f60c9677..051e27ac8f 100644
--- a/packages/app/src/pages/Overview/BalanceLinks.tsx
+++ b/packages/app/src/pages/Overview/BalanceLinks.tsx
@@ -8,7 +8,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useStaking } from 'contexts/Staking';
 import { MoreWrapper } from './Wrappers';
 import { ButtonPrimaryInvert } from 'ui-buttons';
-import { Separator } from 'kits/Structure/Separator';
+import { Separator } from 'ui-structure';
 
 export const BalanceLinks = () => {
   const { t } = useTranslation('pages');
diff --git a/packages/app/src/pages/Overview/StakeStatus/index.tsx b/packages/app/src/pages/Overview/StakeStatus/index.tsx
index 7e9f435598..ca794389fc 100644
--- a/packages/app/src/pages/Overview/StakeStatus/index.tsx
+++ b/packages/app/src/pages/Overview/StakeStatus/index.tsx
@@ -7,7 +7,7 @@ import { NominationStatus } from 'pages/Nominate/Active/Status/NominationStatus'
 import { MembershipStatus } from 'pages/Pools/Home/Status/MembershipStatus';
 import { Tips } from './Tips';
 import { StatusWrapper } from './Wrappers';
-import { RowSection } from 'kits/Structure/RowSection';
+import { RowSection } from 'ui-structure';
 
 export const StakeStatus = () => {
   const { plugins } = usePlugins();
diff --git a/packages/app/src/pages/Overview/index.tsx b/packages/app/src/pages/Overview/index.tsx
index 05e5ad55fe..1133fda479 100644
--- a/packages/app/src/pages/Overview/index.tsx
+++ b/packages/app/src/pages/Overview/index.tsx
@@ -14,10 +14,7 @@ import { StakeStatus } from './StakeStatus';
 import { ActiveEraStat } from './Stats/ActiveEraTimeLeft';
 import { AverageRewardRateStat } from './Stats/AveragelRewardRate';
 import { SupplyStakedStat } from './Stats/SupplyStaked';
-import { PageTitle } from 'kits/Structure/PageTitle';
-import { PageHeadingWrapper } from 'kits/Structure/PageHeading/Wrapper';
-import { PageRow } from 'kits/Structure/PageRow';
-import { RowSection } from 'kits/Structure/RowSection';
+import { PageTitle, PageHeading, PageRow, RowSection } from 'ui-structure';
 
 export const Overview = () => {
   const { t } = useTranslation('pages');
@@ -28,9 +25,9 @@ export const Overview = () => {
     <>
       <PageTitle title={t('overview.overview')} />
       <PageRow>
-        <PageHeadingWrapper>
+        <PageHeading>
           <AccountControls />
-        </PageHeadingWrapper>
+        </PageHeading>
       </PageRow>
       <StatBoxList>
         <AverageRewardRateStat />
diff --git a/packages/app/src/pages/Payouts/index.tsx b/packages/app/src/pages/Payouts/index.tsx
index 7b8530e213..f50278b6dd 100644
--- a/packages/app/src/pages/Payouts/index.tsx
+++ b/packages/app/src/pages/Payouts/index.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow, PageTitle } from 'ui-structure';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MaxPayoutDays } from 'consts';
@@ -25,7 +25,6 @@ import { SubscanController } from 'controllers/Subscan';
 import { DefaultLocale, locales } from 'locale';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonHelp } from 'ui-buttons';
-import { PageTitle } from 'kits/Structure/PageTitle';
 import { useUi } from 'contexts/UI';
 
 export const Payouts = ({ page: { key } }: PageProps) => {
diff --git a/packages/app/src/pages/Pools/Home/ClosurePrompts.tsx b/packages/app/src/pages/Pools/Home/ClosurePrompts.tsx
index 3f564bef57..c95f939196 100644
--- a/packages/app/src/pages/Pools/Home/ClosurePrompts.tsx
+++ b/packages/app/src/pages/Pools/Home/ClosurePrompts.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faLockOpen } from '@fortawesome/free-solid-svg-icons';
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow, ButtonRow } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useActivePool } from 'contexts/Pools/ActivePool';
 import { useTheme } from 'contexts/Themes';
@@ -13,7 +13,6 @@ import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonPrimary } from 'ui-buttons';
-import { ButtonRow } from 'kits/Structure/ButtonRow';
 
 export const ClosurePrompts = () => {
   const { t } = useTranslation('pages');
diff --git a/packages/app/src/pages/Pools/Home/Favorites/index.tsx b/packages/app/src/pages/Pools/Home/Favorites/index.tsx
index 8ae526a8d4..79fdb3c5ca 100644
--- a/packages/app/src/pages/Pools/Home/Favorites/index.tsx
+++ b/packages/app/src/pages/Pools/Home/Favorites/index.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow } from 'ui-structure';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
diff --git a/packages/app/src/pages/Pools/Home/ManageBond.tsx b/packages/app/src/pages/Pools/Home/ManageBond.tsx
index 8d2059b4fc..28d9711112 100644
--- a/packages/app/src/pages/Pools/Home/ManageBond.tsx
+++ b/packages/app/src/pages/Pools/Home/ManageBond.tsx
@@ -16,7 +16,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonHelp, ButtonPrimary } from 'ui-buttons';
-import { ButtonRow } from 'kits/Structure/ButtonRow';
+import { ButtonRow } from 'ui-structure';
 import { planckToUnitBn } from 'library/Utils';
 
 export const ManageBond = () => {
diff --git a/packages/app/src/pages/Pools/Home/ManagePool/index.tsx b/packages/app/src/pages/Pools/Home/ManagePool/index.tsx
index 4a1f02dad7..64c761f2ba 100644
--- a/packages/app/src/pages/Pools/Home/ManagePool/index.tsx
+++ b/packages/app/src/pages/Pools/Home/ManagePool/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faChevronCircleRight } from '@fortawesome/free-solid-svg-icons';
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useHelp } from 'contexts/Help';
 import { useActivePool } from 'contexts/Pools/ActivePool';
diff --git a/packages/app/src/pages/Pools/Home/Status/index.tsx b/packages/app/src/pages/Pools/Home/Status/index.tsx
index 7464d51e32..1b74da48b3 100644
--- a/packages/app/src/pages/Pools/Home/Status/index.tsx
+++ b/packages/app/src/pages/Pools/Home/Status/index.tsx
@@ -6,7 +6,7 @@ import { CardWrapper } from 'library/Card/Wrappers';
 import { MembershipStatus } from './MembershipStatus';
 import { PoolStatus } from './PoolStatus';
 import { RewardsStatus } from './RewardsStatus';
-import { Separator } from 'kits/Structure/Separator';
+import { Separator } from 'ui-structure';
 import type { StatusProps } from './types';
 import { NewMember } from './NewMember';
 import { useSyncing } from 'hooks/useSyncing';
diff --git a/packages/app/src/pages/Pools/Home/index.tsx b/packages/app/src/pages/Pools/Home/index.tsx
index 1e0e3e0b8d..3b6bb253c2 100644
--- a/packages/app/src/pages/Pools/Home/index.tsx
+++ b/packages/app/src/pages/Pools/Home/index.tsx
@@ -25,10 +25,7 @@ import { Status } from './Status';
 import { PoolsTabsProvider, usePoolsTabs } from './context';
 import { useActivePools } from 'hooks/useActivePools';
 import { useBalances } from 'contexts/Balances';
-import { PageTitle } from 'kits/Structure/PageTitle';
-import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types';
-import { PageRow } from 'kits/Structure/PageRow';
-import { RowSection } from 'kits/Structure/RowSection';
+import { PageTitle, PageRow, RowSection } from 'ui-structure';
 import { WithdrawPrompt } from 'library/WithdrawPrompt';
 import { useSyncing } from 'hooks/useSyncing';
 import { useNetwork } from 'contexts/Network';
@@ -55,28 +52,6 @@ export const HomeInner = () => {
     (poolId) => poolId !== String(membership?.poolId)
   ).length;
 
-  let tabs: PageTitleTabProps[] = [
-    {
-      title: t('pools.overview'),
-      active: activeTab === 0,
-      onClick: () => setActiveTab(0),
-    },
-  ];
-
-  tabs = tabs.concat(
-    {
-      title: t('pools.allPools'),
-      active: activeTab === 1,
-      onClick: () => setActiveTab(1),
-    },
-    {
-      title: t('pools.favorites'),
-      active: activeTab === 2,
-      onClick: () => setActiveTab(2),
-      badge: String(favorites.length),
-    }
-  );
-
   const ROW_HEIGHT = 220;
 
   // Go back to tab 0 on network change.
@@ -88,7 +63,24 @@ export const HomeInner = () => {
     <>
       <PageTitle
         title={t('pools.pools')}
-        tabs={tabs}
+        tabs={[
+          {
+            title: t('pools.overview'),
+            active: activeTab === 0,
+            onClick: () => setActiveTab(0),
+          },
+          {
+            title: t('pools.allPools'),
+            active: activeTab === 1,
+            onClick: () => setActiveTab(1),
+          },
+          {
+            title: t('pools.favorites'),
+            active: activeTab === 2,
+            onClick: () => setActiveTab(2),
+            badge: String(favorites.length),
+          },
+        ]}
         button={
           !poolMembersipSyncing() && poolRoleCount > 0
             ? {
diff --git a/packages/app/src/pages/Validators/AllValidators.tsx b/packages/app/src/pages/Validators/AllValidators.tsx
index c66301a4eb..008c6bec7e 100644
--- a/packages/app/src/pages/Validators/AllValidators.tsx
+++ b/packages/app/src/pages/Validators/AllValidators.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
 import { useValidators } from 'contexts/Validators/ValidatorEntries';
diff --git a/packages/app/src/pages/Validators/Favorites.tsx b/packages/app/src/pages/Validators/Favorites.tsx
index 7ee73cbca2..9a7dcbd7f3 100644
--- a/packages/app/src/pages/Validators/Favorites.tsx
+++ b/packages/app/src/pages/Validators/Favorites.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageRow } from 'kits/Structure/PageRow';
+import { PageRow } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
 import { CardWrapper } from 'library/Card/Wrappers';
diff --git a/packages/app/src/pages/Validators/index.tsx b/packages/app/src/pages/Validators/index.tsx
index 1ada89c722..86bab9175f 100644
--- a/packages/app/src/pages/Validators/index.tsx
+++ b/packages/app/src/pages/Validators/index.tsx
@@ -7,8 +7,7 @@ import { useFavoriteValidators } from 'contexts/Validators/FavoriteValidators';
 import { AllValidators } from './AllValidators';
 import { ValidatorFavorites } from './Favorites';
 import { ValidatorsTabsProvider, useValidatorsTabs } from './context';
-import { PageTitle } from 'kits/Structure/PageTitle';
-import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types';
+import { PageTitle } from 'ui-structure';
 
 export const ValidatorsInner = () => {
   const { t } = useTranslation('pages');
@@ -22,24 +21,24 @@ export const ValidatorsInner = () => {
     }
   }, []);
 
-  let tabs: PageTitleTabProps[] = [
-    {
-      title: t('validators.allValidators'),
-      active: activeTab === 0,
-      onClick: () => setActiveTab(0),
-    },
-  ];
-
-  tabs = tabs.concat({
-    title: t('validators.favorites'),
-    active: activeTab === 1,
-    onClick: () => setActiveTab(1),
-    badge: String(favorites.length),
-  });
-
   return (
     <>
-      <PageTitle title={t('validators.validators')} tabs={tabs} />
+      <PageTitle
+        title={t('validators.validators')}
+        tabs={[
+          {
+            title: t('validators.allValidators'),
+            active: activeTab === 0,
+            onClick: () => setActiveTab(0),
+          },
+          {
+            title: t('validators.favorites'),
+            active: activeTab === 1,
+            onClick: () => setActiveTab(1),
+            badge: String(favorites.length),
+          },
+        ]}
+      />
       {activeTab === 0 && <AllValidators />}
       {activeTab === 1 && <ValidatorFavorites />}
     </>
diff --git a/packages/app/src/theme/graphs.ts b/packages/app/src/theme/graphs.ts
deleted file mode 100644
index b2a3602f27..0000000000
--- a/packages/app/src/theme/graphs.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import type { AnyJson } from '@w3ux/types';
-
-export const graphColors: Record<string, AnyJson> = {
-  inactive: {
-    light: '#eee',
-    dark: 'rgb(39,35,39)',
-  },
-  tooltip: {
-    light: '#333',
-    dark: '#ddd',
-  },
-  label: {
-    light: '#fafafa',
-    dark: '#0e0e0e',
-  },
-  grid: {
-    light: '#e8e8e8',
-    dark: 'rgb(64,55,64)',
-  },
-};
diff --git a/packages/consts/package.json b/packages/consts/package.json
new file mode 100644
index 0000000000..8c0c008e30
--- /dev/null
+++ b/packages/consts/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "consts",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "clear": "rm -rf build tsconfig.tsbuildinfo dist",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
+  },
+  "dependencies": {
+    "@polkadot/util": "^13.2.2"
+  }
+}
diff --git a/packages/app/src/consts.ts b/packages/consts/src/index.ts
similarity index 95%
rename from packages/app/src/consts.ts
rename to packages/consts/src/index.ts
index 2efe848b95..c6fdf2059a 100644
--- a/packages/app/src/consts.ts
+++ b/packages/consts/src/index.ts
@@ -19,12 +19,10 @@ export const U32Opts = { bitLength: 32, isLe: true };
 /*
  * Element Thresholds
  */
-
 export const MaxPageWidth = 1450;
 export const SideMenuMaximisedWidth = 195;
 export const SideMenuMinimisedWidth = 75;
 export const SectionFullWidthThreshold = 1000;
-export const PageWidthSmallThreshold = 825;
 export const PageWidthMediumThreshold = 1150;
 export const SmallFontSizeMaxWidth = 600;
 
diff --git a/packages/consts/tsconfig.json b/packages/consts/tsconfig.json
new file mode 100644
index 0000000000..a5729a5329
--- /dev/null
+++ b/packages/consts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "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,
+    "noEmit": true,
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/packages/app/src/theme/accents/kusama-relay.css b/packages/styles/accents/kusama-relay.css
similarity index 100%
rename from packages/app/src/theme/accents/kusama-relay.css
rename to packages/styles/accents/kusama-relay.css
diff --git a/packages/app/src/theme/accents/polkadot-relay.css b/packages/styles/accents/polkadot-relay.css
similarity index 100%
rename from packages/app/src/theme/accents/polkadot-relay.css
rename to packages/styles/accents/polkadot-relay.css
diff --git a/packages/app/src/theme/accents/westend-relay.css b/packages/styles/accents/westend-relay.css
similarity index 100%
rename from packages/app/src/theme/accents/westend-relay.css
rename to packages/styles/accents/westend-relay.css
diff --git a/packages/app/src/theme/fonts/Inter500.woff2 b/packages/styles/fonts/Inter500.woff2
similarity index 100%
rename from packages/app/src/theme/fonts/Inter500.woff2
rename to packages/styles/fonts/Inter500.woff2
diff --git a/packages/app/src/theme/fonts/Inter600.woff2 b/packages/styles/fonts/Inter600.woff2
similarity index 100%
rename from packages/app/src/theme/fonts/Inter600.woff2
rename to packages/styles/fonts/Inter600.woff2
diff --git a/packages/app/src/theme/fonts/Inter700.woff2 b/packages/styles/fonts/Inter700.woff2
similarity index 100%
rename from packages/app/src/theme/fonts/Inter700.woff2
rename to packages/styles/fonts/Inter700.woff2
diff --git a/packages/app/src/theme/fonts/Inter800.woff2 b/packages/styles/fonts/Inter800.woff2
similarity index 100%
rename from packages/app/src/theme/fonts/Inter800.woff2
rename to packages/styles/fonts/Inter800.woff2
diff --git a/packages/app/src/theme/fonts/Inter900.woff2 b/packages/styles/fonts/Inter900.woff2
similarity index 100%
rename from packages/app/src/theme/fonts/Inter900.woff2
rename to packages/styles/fonts/Inter900.woff2
diff --git a/packages/app/src/theme/fonts/Poppins700.woff2 b/packages/styles/fonts/Poppins700.woff2
similarity index 100%
rename from packages/app/src/theme/fonts/Poppins700.woff2
rename to packages/styles/fonts/Poppins700.woff2
diff --git a/packages/app/src/theme/fonts.scss b/packages/styles/fonts/font.scss
similarity index 67%
rename from packages/app/src/theme/fonts.scss
rename to packages/styles/fonts/font.scss
index ec2d8d7a61..0a0890a1a6 100644
--- a/packages/app/src/theme/fonts.scss
+++ b/packages/styles/fonts/font.scss
@@ -5,26 +5,26 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 600;
-  src: url('./fonts/Inter600.woff2') format('woff2');
+  src: url('./Inter600.woff2') format('woff2');
 }
 
 @font-face {
   font-family: InterSemiBold;
   font-style: normal;
   font-weight: 700;
-  src: url('./fonts/Inter700.woff2') format('woff2');
+  src: url('./Inter700.woff2') format('woff2');
 }
 
 @font-face {
   font-family: InterBold;
   font-style: normal;
   font-weight: 800;
-  src: url('./fonts/Inter800.woff2') format('woff2');
+  src: url('./Inter800.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Poppins700;
   font-style: normal;
   font-weight: 700;
-  src: url('./fonts/Poppins700.woff2') format('woff2');
+  src: url('./Poppins700.woff2') format('woff2');
 }
diff --git a/packages/styles/graphs/index.json b/packages/styles/graphs/index.json
new file mode 100644
index 0000000000..7a6598d18d
--- /dev/null
+++ b/packages/styles/graphs/index.json
@@ -0,0 +1,18 @@
+{
+  "inactive": {
+    "light": "#eee",
+    "dark": "rgb(39,35,39)"
+  },
+  "tooltip": {
+    "light": "#333",
+    "dark": "#ddd"
+  },
+  "label": {
+    "light": "#fafafa",
+    "dark": "#0e0e0e"
+  },
+  "grid": {
+    "light": "#e8e8e8",
+    "dark": "rgb(64,55,64)"
+  }
+}
diff --git a/packages/styles/package.json b/packages/styles/package.json
new file mode 100644
index 0000000000..9b7d80a17f
--- /dev/null
+++ b/packages/styles/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "styles",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "main": "src/",
+  "scripts": {
+    "clear": "rm -rf build tsconfig.tsbuildinfo dist",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
+  },
+  "dependencies": {
+    "@polkadot/util": "^13.2.2"
+  }
+}
diff --git a/packages/styles/theme/_variables.scss b/packages/styles/theme/_variables.scss
new file mode 100644
index 0000000000..76f0682b57
--- /dev/null
+++ b/packages/styles/theme/_variables.scss
@@ -0,0 +1,7 @@
+/* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+$page-width-medium-threshold: 1150px;
+$page-width-small-threshold: 826px;
+$row-section-thirds-threshold: 1400px;
+$side-menu-minimised-width: 75px;
\ No newline at end of file
diff --git a/packages/app/src/theme/index.scss b/packages/styles/theme/index.scss
similarity index 70%
rename from packages/app/src/theme/index.scss
rename to packages/styles/theme/index.scss
index 48c3d62329..efae781973 100644
--- a/packages/app/src/theme/index.scss
+++ b/packages/styles/theme/index.scss
@@ -1,29 +1,7 @@
 /* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 SPDX-License-Identifier: GPL-3.0-only */
 
-/* NOTE: This file should be imported in the main library entry file. */
-
-/* Define theme variables. */
-
-:root {
-  /* Button variables. */
-  --button-border-radius-small: 0.75rem;
-  --button-border-radius-large: 1.5rem;
-  --button-padding-small: 0.41rem 1rem;
-  --button-padding-large: 0.53rem 1rem;
-  --button-spacing-small: 0.125rem;
-  --button-spacing-large: 0.625rem;
-  --button-font-size-small: 1rem;
-  --button-font-size-large: 1.15rem;
-
-  /* Transition variables. */
-  --transition-duration: 0.15s;
-
-  /* Miscellaneous variables. */
-  --opacity-disabled: 0.3;
-}
-
-/* Define global font sizes. */
+@import '_variables';
 
 html {
   font-size: 10.5px;
@@ -32,14 +10,10 @@ html {
   }
 }
 
-/* Every element conforms to border-box by default. */
-
 * {
   box-sizing: border-box;
 }
 
-/* Body style. */
-
 body {
   font-family: Inter, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -49,8 +23,6 @@ body {
   margin: 0;
 }
 
-/* Header styling. */
-
 h1 {
   color: var(--text-color-primary);
   font-family: InterSemiBold, sans-serif;
@@ -95,8 +67,6 @@ h5 {
   margin: 0;
 }
 
-/* Pragraph style. */
-
 p {
   color: var(--text-color-secondary);
   font-size: 1.04rem;
@@ -104,16 +74,12 @@ p {
   margin: 0.75rem 0;
 }
 
-/* Anchor style. */
-
 a {
   color: var(--text-color-secondary);
   text-decoration: none;
   cursor: pointer;
 }
 
-/* Base button style. */
-
 button {
   -webkit-tap-highlight-color: transparent;
   font-family: Inter, sans-serif;
@@ -124,8 +90,6 @@ button {
   padding: 0;
 }
 
-/* Base input style. */
-
 input {
   color: var(--text-color-primary);
   font-family: Inter, sans-serif;
@@ -150,9 +114,21 @@ textarea:focus {
   outline: none;
 }
 
-/* Base SVG style. */
-
 path.primary,
 ellipse.primary {
   fill: var(--text-color-primary);
 }
+
+.page-padding {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+
+  @media (min-width: $page-width-small-threshold) {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
+  @media (min-width: $page-width-small-threshold) {
+    padding: 0 5rem 0 2.5rem;
+  }
+}
diff --git a/packages/app/src/theme/theme.scss b/packages/styles/theme/theme.scss
similarity index 94%
rename from packages/app/src/theme/theme.scss
rename to packages/styles/theme/theme.scss
index 9eae8ecbd5..0e79061aa3 100644
--- a/packages/app/src/theme/theme.scss
+++ b/packages/styles/theme/theme.scss
@@ -1,6 +1,22 @@
 /* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 SPDX-License-Identifier: GPL-3.0-only */
 
+/* general styles */
+:root {
+  --button-border-radius-small: 0.75rem;
+  --button-border-radius-large: 1.5rem;
+  --button-padding-small: 0.41rem 1rem;
+  --button-padding-large: 0.53rem 1rem;
+  --button-spacing-small: 0.125rem;
+  --button-spacing-large: 0.625rem;
+  --button-font-size-small: 1rem;
+  --button-font-size-large: 1.15rem;
+
+  --transition-duration: 0.15s;
+
+  --opacity-disabled: 0.3;
+}
+
 /* light theme colors */
 .theme-light {
   --background-default: #efeeee;
diff --git a/packages/ui-buttons/package.json b/packages/ui-buttons/package.json
index bd233479d5..d751a3b6c9 100644
--- a/packages/ui-buttons/package.json
+++ b/packages/ui-buttons/package.json
@@ -6,8 +6,7 @@
   "main": "src/index.tsx",
   "scripts": {
     "clear": "rm -rf build tsconfig.tsbuildinfo dist",
-    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn",
-    "dev": "vite"
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
   },
   "dependencies": {
     "@fortawesome/react-fontawesome": "^0.2.2",
diff --git a/packages/ui-buttons/src/ButtonHelp/index.module.scss b/packages/ui-buttons/src/ButtonHelp/index.module.scss
index 1aa1b67f61..d43bbeaa03 100644
--- a/packages/ui-buttons/src/ButtonHelp/index.module.scss
+++ b/packages/ui-buttons/src/ButtonHelp/index.module.scss
@@ -11,15 +11,15 @@
   height: 1.35rem;
 }
 
-.btnHelp_secondaryBackground {
+.btnHelpSecondaryBackground {
   background: var(--button-primary-background);
 }
 
-.btnHelp_noBackground {
+.btnHelpNoBackground {
   background: none;
 }
 
-.btnHelp_outline {
+.btnHelpOutline {
   border: 1px solid var(--text-color-tertiary);
   color: var(--text-color-tertiary);
   fill: var(--text-color-tertiary);
@@ -30,7 +30,7 @@
   }
 }
 
-.btnHelp_icon {
+.btnHelpIcon {
   &:hover {
     fill: var(--accent-color-primary);
   }
diff --git a/packages/ui-buttons/src/ButtonHelp/index.tsx b/packages/ui-buttons/src/ButtonHelp/index.tsx
index 22c1d2608a..86235c7bcd 100644
--- a/packages/ui-buttons/src/ButtonHelp/index.tsx
+++ b/packages/ui-buttons/src/ButtonHelp/index.tsx
@@ -36,9 +36,9 @@ export const ButtonHelp = (props: ButtonHelpProps): JSX.Element => {
     commonClasses.btnCore,
     classes.btnHelp,
     {
-      [classes.btnHelp_secondaryBackground]: background === 'secondary',
-      [classes.btnHelp_noBackground]: background === 'none',
-      [classes.btnHelp_outline]: outline,
+      [classes.btnHelpSecondaryBackground]: background === 'secondary',
+      [classes.btnHelpNoBackground]: background === 'none',
+      [classes.btnHelpOutline]: outline,
       [commonClasses.btnSpacingLeft]: marginLeft,
       [commonClasses.btnSpacingRight]: marginRight,
       [commonClasses.marginLeft]: marginLeft,
@@ -61,7 +61,7 @@ export const ButtonHelp = (props: ButtonHelpProps): JSX.Element => {
         viewBox="0 0 64 64"
         width="100%"
         height="100%"
-        className={classes.btnHelp_icon}
+        className={classes.btnHelpIcon}
       >
         <path d="M32 15c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5 4.5-2 4.5-4.5-2-4.5-4.5-4.5zm0 14.5c-2.5 0-4.5 2-4.5 4.5v12c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5V34c0-2.5-2-4.5-4.5-4.5z" />
       </svg>
diff --git a/packages/ui-buttons/src/ButtonOption/index.module.scss b/packages/ui-buttons/src/ButtonOption/index.module.scss
index 0c46533067..6ad5f46d32 100644
--- a/packages/ui-buttons/src/ButtonOption/index.module.scss
+++ b/packages/ui-buttons/src/ButtonOption/index.module.scss
@@ -32,10 +32,10 @@
   }
 }
 
-.btnContent_details {
+.btnContentDetails {
   display: flex;
 }
 
-.btnContent_icon {
+.btnContentIcon {
   margin-right: 0.5rem;
 }
diff --git a/packages/ui-buttons/src/ButtonOption/index.tsx b/packages/ui-buttons/src/ButtonOption/index.tsx
index 6b6928cc27..f74b40000b 100644
--- a/packages/ui-buttons/src/ButtonOption/index.tsx
+++ b/packages/ui-buttons/src/ButtonOption/index.tsx
@@ -48,12 +48,12 @@ export const ButtonOption = (props: ButtonOptionProps): JSX.Element => {
       disabled={disabled}
       {...onMouseHandlers({ onClick, onMouseOver, onMouseMove, onMouseOut })}
     >
-      <div className={classes.btnContent_details}>{children}</div>
+      <div className={classes.btnContentDetails}>{children}</div>
       <div>
         <FontAwesomeIcon
           transform="shrink-2"
           icon={faChevronRight}
-          className={classes.btnContent_icon}
+          className={classes.btnContentIcon}
         />
       </div>
     </button>
diff --git a/packages/ui-buttons/src/ButtonPrimary/index.module.scss b/packages/ui-buttons/src/ButtonPrimary/index.module.scss
index 3c50e435f6..3d1ba5a188 100644
--- a/packages/ui-buttons/src/ButtonPrimary/index.module.scss
+++ b/packages/ui-buttons/src/ButtonPrimary/index.module.scss
@@ -9,7 +9,7 @@
   transition: transform 0.2s;
 }
 
-.btnPrimary_secondaryColor {
+.btnPrimarySecondaryColor {
   background: var(--accent-color-secondary);
   border: 1px solid var(--accent-color-secondary);
 }
diff --git a/packages/ui-buttons/src/ButtonPrimary/index.tsx b/packages/ui-buttons/src/ButtonPrimary/index.tsx
index 31cfe5f78f..50d43ecc44 100644
--- a/packages/ui-buttons/src/ButtonPrimary/index.tsx
+++ b/packages/ui-buttons/src/ButtonPrimary/index.tsx
@@ -49,7 +49,7 @@ export const ButtonPrimary = (props: ButtonPrimaryProps): JSX.Element => {
       [commonClasses.btnMarginX]: marginX,
       [commonClasses.btnDisabled]: disabled,
       [commonClasses.btnActiveTransforms]: !disabled,
-      [classes.btnPrimary_secondaryColor]: colorSecondary,
+      [classes.btnPrimarySecondaryColor]: colorSecondary,
     },
     className
   );
diff --git a/packages/ui-buttons/src/ButtonPrimaryInvert/index.module.scss b/packages/ui-buttons/src/ButtonPrimaryInvert/index.module.scss
index 530097ec4d..f4a3b36d97 100644
--- a/packages/ui-buttons/src/ButtonPrimaryInvert/index.module.scss
+++ b/packages/ui-buttons/src/ButtonPrimaryInvert/index.module.scss
@@ -6,7 +6,7 @@
   border-radius: var(--button-border-radius-large);
   color: var(--accent-color-stroke);
 }
-.btnPrimaryInvert_secondaryColor {
+.btnPrimaryInvertSecondaryColor {
   border: 1px solid var(--accent-color-secondary);
   color: var(--accent-color-secondary);
 }
diff --git a/packages/ui-buttons/src/ButtonPrimaryInvert/index.tsx b/packages/ui-buttons/src/ButtonPrimaryInvert/index.tsx
index ff34130da0..7879b76b0b 100644
--- a/packages/ui-buttons/src/ButtonPrimaryInvert/index.tsx
+++ b/packages/ui-buttons/src/ButtonPrimaryInvert/index.tsx
@@ -51,7 +51,7 @@ export const ButtonPrimaryInvert = (
       [commonClasses.btnMarginX]: marginX,
       [commonClasses.btnDisabled]: disabled,
       [commonClasses.btnActiveTransforms]: !disabled,
-      [classes.btnPrimaryInvert_secondaryColor]: colorSecondary,
+      [classes.btnPrimaryInvertSecondaryColor]: colorSecondary,
     },
     className
   );
diff --git a/packages/ui-buttons/src/ButtonSubmit/index.module.scss b/packages/ui-buttons/src/ButtonSubmit/index.module.scss
index e0e0775e6b..4c343029ba 100644
--- a/packages/ui-buttons/src/ButtonSubmit/index.module.scss
+++ b/packages/ui-buttons/src/ButtonSubmit/index.module.scss
@@ -8,22 +8,22 @@
   color: white;
 }
 
-.btnSubmit_secondaryColor {
+.btnSubmitSecondaryColor {
   border-color: var(--accent-color-secondary);
   background: var(--accent-color-secondary);
 }
 
-.btnSubmit_sm {
+.btnSubmitSm {
   padding: var(--button-padding-large);
   font-size: var(--button-font-size-small);
 }
 
-.btnSubmit_lg {
+.btnSubmitLg {
   padding: var(--button-padding-large);
   font-size: var(--button-font-size-large);
 }
 
-.btnSubmit_pulse {
+.btnSubmitPulse {
   box-shadow: 0 0 30px 0 var(--accent-color-pending);
   transform: scale(1);
   animation: pulse 2s infinite;
diff --git a/packages/ui-buttons/src/ButtonSubmit/index.tsx b/packages/ui-buttons/src/ButtonSubmit/index.tsx
index ce4d3efb64..5a7ee44824 100644
--- a/packages/ui-buttons/src/ButtonSubmit/index.tsx
+++ b/packages/ui-buttons/src/ButtonSubmit/index.tsx
@@ -48,10 +48,10 @@ export const ButtonSubmit = (props: ButtonSubmitProps): JSX.Element => {
       [commonClasses.btnMarginX]: marginX,
       [commonClasses.btnDisabled]: disabled,
       [commonClasses.btnActiveTransforms]: !disabled,
-      [classes.btnSubmit_lg]: lg,
-      [classes.btnSubmit_sm]: !lg,
-      [classes.btnSubmit_secondaryColor]: colorSecondary,
-      [classes.btnSubmit_pulse]: pulse,
+      [classes.btnSubmitLg]: lg,
+      [classes.btnSubmitSm]: !lg,
+      [classes.btnSubmitSecondaryColor]: colorSecondary,
+      [classes.btnSubmitPulse]: pulse,
     },
     className
   );
diff --git a/packages/ui-buttons/src/ButtonSubmitInvert/index.module.scss b/packages/ui-buttons/src/ButtonSubmitInvert/index.module.scss
index b8f39c35bc..bf3dd0f1e4 100644
--- a/packages/ui-buttons/src/ButtonSubmitInvert/index.module.scss
+++ b/packages/ui-buttons/src/ButtonSubmitInvert/index.module.scss
@@ -7,12 +7,12 @@
   color: var(--accent-color-stroke);
 }
 
-.btnSubmitInvert_sm {
+.btnSubmitInvertSm {
   padding: var(--button-padding-large);
   font-size: var(--button-font-size-small);
 }
 
-.btnSubmitInvert_lg {
+.btnSubmitInvertLg {
   padding: var(--button-padding-large);
   font-size: var(--button-font-size-large);
 }
diff --git a/packages/ui-buttons/src/ButtonSubmitInvert/index.tsx b/packages/ui-buttons/src/ButtonSubmitInvert/index.tsx
index c0528e5d4a..5ff8399294 100644
--- a/packages/ui-buttons/src/ButtonSubmitInvert/index.tsx
+++ b/packages/ui-buttons/src/ButtonSubmitInvert/index.tsx
@@ -48,8 +48,8 @@ export const ButtonSubmitInvert = (
       [commonClasses.btnMarginX]: marginX,
       [commonClasses.btnDisabled]: disabled,
       [commonClasses.btnActiveTransforms]: !disabled,
-      [classes.btnSubmitInvert_lg]: lg,
-      [classes.btnSubmitInvert_sm]: !lg,
+      [classes.btnSubmitInvertLg]: lg,
+      [classes.btnSubmitInvertSm]: !lg,
     },
     className
   );
diff --git a/packages/ui-buttons/src/ButtonTab/index.module.scss b/packages/ui-buttons/src/ButtonTab/index.module.scss
index 054dfce903..b157381b38 100644
--- a/packages/ui-buttons/src/ButtonTab/index.module.scss
+++ b/packages/ui-buttons/src/ButtonTab/index.module.scss
@@ -26,24 +26,24 @@
   }
 }
 
-.btnTab_inner {
+.btnTabInner {
   display: flex;
   align-items: center;
 }
 
-.btnTab_active {
+.btnTabActive {
   background: var(--button-tab-background);
 }
 
-.btnTab_secondaryColor_active {
+.btnTabSecondaryColorActive {
   background: var(--button-tab-canvas-background);
 }
 
-.btnTab_secondaryColor {
+.btnTabSecondaryColor {
   color: var(--text-color-secondary);
 }
 
-.btnTab_badge {
+.btnTabBadge {
   border: 1px solid var(--border-primary-color);
   color: var(--text-color-tertiary);
   font-size: var(--button-font-size-small);
diff --git a/packages/ui-buttons/src/ButtonTab/index.tsx b/packages/ui-buttons/src/ButtonTab/index.tsx
index d01af45177..7ff056b9e2 100644
--- a/packages/ui-buttons/src/ButtonTab/index.tsx
+++ b/packages/ui-buttons/src/ButtonTab/index.tsx
@@ -32,8 +32,8 @@ export const ButtonTab = (props: ButtonTabProps): JSX.Element => {
   } = props;
 
   const activeClass = colorSecondary
-    ? classes.btnTab_secondaryColor_active
-    : classes.btnTab_active;
+    ? classes.btnTabSecondaryColorActive
+    : classes.btnTabActive;
 
   const buttonClasses = classNames(
     commonClasses.btnCore,
@@ -41,7 +41,7 @@ export const ButtonTab = (props: ButtonTabProps): JSX.Element => {
     {
       [commonClasses.btnDisabled]: disabled,
       [activeClass]: active,
-      [classes.btnTab_secondaryColor]: colorSecondary,
+      [classes.btnTabSecondaryColor]: colorSecondary,
     },
     className
   );
@@ -54,9 +54,9 @@ export const ButtonTab = (props: ButtonTabProps): JSX.Element => {
       disabled={disabled}
       {...onMouseHandlers({ onClick, onMouseOver, onMouseMove, onMouseOut })}
     >
-      <span className={classes.btnTab_inner}>
+      <span className={classes.btnTabInner}>
         {title}
-        {badge && <span className={classes.btnTab_badge}>{badge}</span>}
+        {badge && <span className={classes.btnTabBadge}>{badge}</span>}
       </span>
     </button>
   );
diff --git a/packages/ui-buttons/src/common.module.scss b/packages/ui-buttons/src/common.module.scss
index cb0fbd7ea0..2988f94df7 100644
--- a/packages/ui-buttons/src/common.module.scss
+++ b/packages/ui-buttons/src/common.module.scss
@@ -73,47 +73,4 @@
   &:active {
     transform: scale(0.98);
   }
-}
-
-/*
-TODO: Refactor into CSS Module.
-@mixin btn-submit {
-  &.sm {
-    padding: var(--button-padding-large);
-    font-size: var(--button-font-size-small);
-  }
-
-  &.lg {
-    padding: var(--button-padding-large);
-    font-size: var(--button-font-size-large);
-  }
-}
-*/
-
-/*
-TODO: Refactor into CSS Module.
-@mixin btn-pulse {
-  &.pulse {
-    box-shadow: 0 0 30px 0 var(--accent-color-pending);
-    transform: scale(1);
-    animation: pulse 2s infinite;
-
-    @keyframes pulse {
-      0% {
-        transform: scale(0.95);
-        box-shadow: 0 0 0 0 var(--accent-color-pending);
-      }
-
-      70% {
-        transform: scale(1);
-        box-shadow: 0 0 0 10px rgb(0 0 0 / 0%);
-      }
-
-      100% {
-        transform: scale(0.95);
-        box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
-      }
-    }
-  }
-}
-*/
+}
\ No newline at end of file
diff --git a/packages/ui-structure/package.json b/packages/ui-structure/package.json
new file mode 100644
index 0000000000..0e246d9999
--- /dev/null
+++ b/packages/ui-structure/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "ui-structure",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "clear": "rm -rf build tsconfig.tsbuildinfo dist",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn"
+  },
+  "dependencies": {
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@w3ux/types": "^0.2.0",
+    "@w3ux/utils": "^1.1.1-beta.9"
+  }
+}
diff --git a/packages/app/src/kits/Structure/Body/Wrapper.ts b/packages/ui-structure/src/Body/index.module.scss
similarity index 69%
rename from packages/app/src/kits/Structure/Body/Wrapper.ts
rename to packages/ui-structure/src/Body/index.module.scss
index 17b92d26c8..ecb1f70696 100644
--- a/packages/app/src/kits/Structure/Body/Wrapper.ts
+++ b/packages/ui-structure/src/Body/index.module.scss
@@ -1,10 +1,8 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.body {
   position: relative;
   display: flex;
   flex-grow: 1;
-`;
+}
\ No newline at end of file
diff --git a/packages/app/src/kits/Structure/Body/index.tsx b/packages/ui-structure/src/Body/index.tsx
similarity index 73%
rename from packages/app/src/kits/Structure/Body/index.tsx
rename to packages/ui-structure/src/Body/index.tsx
index 5e2df3a1a7..ddae544461 100644
--- a/packages/app/src/kits/Structure/Body/index.tsx
+++ b/packages/ui-structure/src/Body/index.tsx
@@ -2,12 +2,14 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
+import classes from './index.module.scss';
 
 /**
  * @name Body
  * @summary An element that houses Side and Main.
  */
 export const Body = ({ children, style }: ComponentBase) => (
-  <Wrapper style={style}>{children}</Wrapper>
+  <div className={classes.body} style={style}>
+    {children}
+  </div>
 );
diff --git a/packages/app/src/kits/Structure/ButtonRow/Wrapper.ts b/packages/ui-structure/src/ButtonRow/index.module.scss
similarity index 58%
rename from packages/app/src/kits/Structure/ButtonRow/Wrapper.ts
rename to packages/ui-structure/src/ButtonRow/index.module.scss
index 672b383b6e..3c70f42e9c 100644
--- a/packages/app/src/kits/Structure/ButtonRow/Wrapper.ts
+++ b/packages/ui-structure/src/ButtonRow/index.module.scss
@@ -1,13 +1,11 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.buttonRow {
   display: flex;
   align-items: center;
+}
 
-  &.y-margin {
-    margin-top: 1rem;
-  }
-`;
+.buttonRowYMargin {
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/packages/ui-structure/src/ButtonRow/index.tsx b/packages/ui-structure/src/ButtonRow/index.tsx
new file mode 100644
index 0000000000..0dc641e089
--- /dev/null
+++ b/packages/ui-structure/src/ButtonRow/index.tsx
@@ -0,0 +1,22 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames';
+import classes from './index.module.scss';
+import type { RowProps } from '../types';
+
+/**
+ * @name ButtonRow
+ * @summary A flex container for a row of buttons.
+ */
+export const ButtonRow = ({ children, style, yMargin }: RowProps) => {
+  const buttonClasses = classNames(classes.buttonRow, {
+    [classes.buttonRowYMargin]: yMargin,
+  });
+
+  return (
+    <div className={buttonClasses} style={style}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/app/src/kits/Structure/Entry/Wrapper.ts b/packages/ui-structure/src/Entry/index.module.scss
similarity index 79%
rename from packages/app/src/kits/Structure/Entry/Wrapper.ts
rename to packages/ui-structure/src/Entry/index.module.scss
index 7ce9761b6f..715464ee7a 100644
--- a/packages/app/src/kits/Structure/Entry/Wrapper.ts
+++ b/packages/ui-structure/src/Entry/index.module.scss
@@ -1,9 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.entry {
   background: var(--gradient-background);
   background-attachment: fixed;
   display: flex;
@@ -11,4 +9,5 @@ export const Wrapper = styled.div`
   flex-grow: 1;
   width: 100%;
   min-height: 100vh;
-`;
+
+}
\ No newline at end of file
diff --git a/packages/app/src/kits/Structure/Entry/index.tsx b/packages/ui-structure/src/Entry/index.tsx
similarity index 73%
rename from packages/app/src/kits/Structure/Entry/index.tsx
rename to packages/ui-structure/src/Entry/index.tsx
index 993ca30a2c..f586fa42ee 100644
--- a/packages/app/src/kits/Structure/Entry/index.tsx
+++ b/packages/ui-structure/src/Entry/index.tsx
@@ -2,12 +2,10 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
+import classes from './index.module.scss';
 
 export type EntryProps = ComponentBase & {
-  // the theme mode.
   mode: 'light' | 'dark';
-  // the active theme.
   theme: string;
 };
 
@@ -16,7 +14,10 @@ export type EntryProps = ComponentBase & {
  * @summary The outer-most wrapper that hosts core tag styling.
  */
 export const Entry = ({ children, style, mode, theme }: EntryProps) => (
-  <Wrapper className={`theme-${mode} theme-${theme}`} style={style}>
+  <div
+    className={`${classes.entry} theme-${mode} theme-${theme}`}
+    style={style}
+  >
     {children}
-  </Wrapper>
+  </div>
 );
diff --git a/packages/app/src/kits/Structure/Main/Wrapper.ts b/packages/ui-structure/src/Main/index.module.scss
similarity index 73%
rename from packages/app/src/kits/Structure/Main/Wrapper.ts
rename to packages/ui-structure/src/Main/index.module.scss
index e048c9e11c..c7c0985867 100644
--- a/packages/app/src/kits/Structure/Main/Wrapper.ts
+++ b/packages/ui-structure/src/Main/index.module.scss
@@ -1,12 +1,10 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.main {
   position: relative;
   display: flex;
   flex-direction: column;
   max-width: 100%;
   flex: 1;
-`;
+}
\ No newline at end of file
diff --git a/packages/app/src/kits/Structure/Main/index.tsx b/packages/ui-structure/src/Main/index.tsx
similarity index 81%
rename from packages/app/src/kits/Structure/Main/index.tsx
rename to packages/ui-structure/src/Main/index.tsx
index 4ed038d0e6..579f9b3b12 100644
--- a/packages/app/src/kits/Structure/Main/index.tsx
+++ b/packages/ui-structure/src/Main/index.tsx
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
+import classes from './index.module.scss';
 
 /**
  * @name Main
@@ -12,9 +12,9 @@ import { forwardRef } from 'react';
  */
 export const Main = forwardRef(
   ({ children, style }: ComponentBase, ref?: ForwardedRef<HTMLDivElement>) => (
-    <Wrapper ref={ref} style={style}>
+    <div className={classes.main} ref={ref} style={style}>
       {children}
-    </Wrapper>
+    </div>
   )
 );
 Main.displayName = 'Main';
diff --git a/packages/ui-structure/src/Page/index.module.scss b/packages/ui-structure/src/Page/index.module.scss
new file mode 100644
index 0000000000..523e58882f
--- /dev/null
+++ b/packages/ui-structure/src/Page/index.module.scss
@@ -0,0 +1,10 @@
+/* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+.page {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4.5rem;
+  width: 100%;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/packages/ui-structure/src/Page/index.tsx b/packages/ui-structure/src/Page/index.tsx
new file mode 100644
index 0000000000..700902660f
--- /dev/null
+++ b/packages/ui-structure/src/Page/index.tsx
@@ -0,0 +1,19 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { MaxPageWidth } from 'consts';
+import classes from './index.module.scss';
+import type { ComponentBase } from '@w3ux/types';
+
+/**
+ * @name Page
+ * @summary Page container.
+ */
+export const Page = ({ children, style }: ComponentBase) => (
+  <div
+    className={classes.page}
+    style={{ ...style, maxWidth: `${MaxPageWidth}px` }}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/app/src/kits/Structure/PageHeading/Wrapper.ts b/packages/ui-structure/src/PageHeading/index.module.scss
similarity index 60%
rename from packages/app/src/kits/Structure/PageHeading/Wrapper.ts
rename to packages/ui-structure/src/PageHeading/index.module.scss
index 08f6b50a39..f9d7b3f9b3 100644
--- a/packages/app/src/kits/Structure/PageHeading/Wrapper.ts
+++ b/packages/ui-structure/src/PageHeading/index.module.scss
@@ -1,9 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const PageHeadingWrapper = styled.div`
+.pageHeading {
   border-bottom: 1px solid var(--border-primary-color);
   display: flex;
   align-items: center;
@@ -16,15 +14,4 @@ export const PageHeadingWrapper = styled.div`
   > span {
     margin-right: 1rem;
   }
-
-  .right {
-    flex: 1 1 0%;
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: flex-end;
-
-    button {
-      margin: 0 0 0 1rem;
-    }
-  }
-`;
+}
\ No newline at end of file
diff --git a/packages/ui-structure/src/PageHeading/index.tsx b/packages/ui-structure/src/PageHeading/index.tsx
new file mode 100644
index 0000000000..d326a5e137
--- /dev/null
+++ b/packages/ui-structure/src/PageHeading/index.tsx
@@ -0,0 +1,15 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classes from './index.module.scss';
+import type { ComponentBase } from '@w3ux/types';
+
+/**
+ * @name Page
+ * @summary Page heading container.
+ */
+export const PageHeading = ({ children, style }: ComponentBase) => (
+  <div className={classes.pageHeading} style={style}>
+    {children}
+  </div>
+);
diff --git a/packages/app/src/kits/Structure/PageRow/Wrapper.ts b/packages/ui-structure/src/PageRow/index.module.scss
similarity index 64%
rename from packages/app/src/kits/Structure/PageRow/Wrapper.ts
rename to packages/ui-structure/src/PageRow/index.module.scss
index c9dd9cd0ce..7a917e2c63 100644
--- a/packages/app/src/kits/Structure/PageRow/Wrapper.ts
+++ b/packages/ui-structure/src/PageRow/index.module.scss
@@ -1,16 +1,14 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.pageRow {
   display: flex;
   flex-shrink: 0;
   flex-flow: row wrap;
   width: 100%;
   margin: 0;
+}
 
-  &.y-margin {
-    margin: 1rem 0;
-  }
-`;
+.pageRowYMargin {
+  margin: 1rem 0;
+}
diff --git a/packages/ui-structure/src/PageRow/index.tsx b/packages/ui-structure/src/PageRow/index.tsx
new file mode 100644
index 0000000000..6c56fc2465
--- /dev/null
+++ b/packages/ui-structure/src/PageRow/index.tsx
@@ -0,0 +1,23 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import classNames from 'classnames';
+import classes from './index.module.scss';
+import type { RowProps } from '../types';
+
+/**
+ * @name PageRow
+ * @summary Used to separate page content based on rows. Commonly used with `RowPrimary` and
+ * `RowSecondary`.
+ */
+export const PageRow = ({ children, style, yMargin }: RowProps) => {
+  const buttonClasses = classNames(classes.pageRow, 'page-padding', {
+    [classes.pageRowYMargin]: yMargin,
+  });
+
+  return (
+    <div className={buttonClasses} style={style}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/ui-structure/src/PageTitle/index.module.scss b/packages/ui-structure/src/PageTitle/index.module.scss
new file mode 100644
index 0000000000..ca638433f7
--- /dev/null
+++ b/packages/ui-structure/src/PageTitle/index.module.scss
@@ -0,0 +1,101 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+@import 'styles/theme/_variables';
+
+.pageTitleScrollWrapper {
+  background: var(--background-default);
+  display: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 4rem;
+  z-index: 4;
+
+  @media (max-width: $page-width-medium-threshold) {
+    display: block;
+  }
+}
+
+.pageTitle {
+  background: var(--background-default);
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-end;
+  position: sticky;
+  margin-top: 5rem;
+  top: 0;
+  transition: padding 0.3s ease-out;
+  width: 100%;
+  z-index: 5;
+
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+
+  @media (min-width: $page-width-small-threshold) {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+  @media (min-width: $page-width-small-threshold) {
+    padding-right: 5rem ;
+    padding-left: 2.5rem;
+  }
+
+  @media (max-width: $page-width-medium-threshold) {
+    top: 4rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0;
+  }
+}
+
+.pageTitleDefault {
+  margin-bottom: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0;
+}
+
+.pageTitleSticky {
+  padding-top: 1.5rem;
+  padding-bottom: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.pageTitleTitle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.pageTitleTitleRight{
+  padding-left: 1rem;
+}
+
+.pageTitleH1 {
+  font-size: 2rem;
+  font-family: Poppins700, sans-serif;
+  font-weight: 700;
+  position: relative;
+
+  @media (max-width: $page-width-medium-threshold) {
+    left: 0rem;
+    transform: scale(0.9);
+  }
+  transition: all var(--transition-duration);
+  margin: 0;
+}
+.pageTitleH1Default {
+  left: 0;
+  transform: scale(1);
+}
+
+.pageTitleH1Sticky  {
+  left: -0.75rem;
+  transform: scale(0.85);
+}
+
+.pageTitleStickyTitle {
+  margin-bottom: 0.5rem;
+}
diff --git a/packages/app/src/kits/Structure/PageTitle/index.tsx b/packages/ui-structure/src/PageTitle/index.tsx
similarity index 51%
rename from packages/app/src/kits/Structure/PageTitle/index.tsx
rename to packages/ui-structure/src/PageTitle/index.tsx
index 95acdc0c29..77abdca115 100644
--- a/packages/app/src/kits/Structure/PageTitle/index.tsx
+++ b/packages/ui-structure/src/PageTitle/index.tsx
@@ -3,11 +3,11 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
-import { PageTitleTabs } from '../PageTitleTabs';
+import { PageTitleTabs } from 'ui-structure';
 import { ButtonSecondary } from 'ui-buttons';
-import { appendOrEmpty } from '@w3ux/utils';
-import type { PageTitleProps } from './types';
-import { PageTitleWrapper, ScrollableWrapper } from './Wrappers';
+import type { PageTitleProps } from '../types';
+import classes from './index.module.scss';
+import classNames from 'classnames';
 
 /**
  * @name PageTitle
@@ -20,52 +20,52 @@ export const PageTitle = ({ title, button, tabs = [] }: PageTitleProps) => {
   const ref = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    const cachedRef = ref.current;
     const observer = new IntersectionObserver(
-      ([e]) => {
-        setSticky(e.intersectionRatio < 1);
-      },
+      ([entry]) => setSticky(entry.intersectionRatio < 1),
       { threshold: [1], rootMargin: '-1px 0px 0px 0px' }
     );
-
-    if (cachedRef) {
-      observer.observe(cachedRef);
+    if (ref.current) {
+      observer.observe(ref.current);
     }
-    // unmount.
     return () => {
-      if (cachedRef) {
-        observer.unobserve(cachedRef);
+      if (ref.current) {
+        observer.unobserve(ref.current);
       }
     };
   }, [sticky]);
 
+  const buttonClasses = classNames(classes.pageTitle, {
+    [classes.pageTitleDefault]: !sticky,
+    [classes.pageTitleSticky]: sticky,
+  });
+
+  const h1Classes = classNames(classes.pageTitleH1, {
+    [classes.pageTitleH1Default]: !sticky,
+    [classes.pageTitleH1Sticky]: sticky,
+  });
+
   return (
     <>
-      <ScrollableWrapper />
-      <PageTitleWrapper
-        ref={ref}
-        className={`page-padding${appendOrEmpty(sticky, 'sticky')}`}
-      >
-        <section className="title">
+      <div className={classes.pageTitleScrollWrapper} />
+      <header className={buttonClasses} ref={ref}>
+        <section className={classes.pageTitleTitle}>
           <div>
-            <h1>{title}</h1>
+            <h1 className={h1Classes}>{title}</h1>
           </div>
-          <div className="right">
-            {button && (
+          {button && (
+            <div className={classes.pageTitleTitleRight}>
               <ButtonSecondary
                 text={button.title}
-                onClick={() => button.onClick()}
+                onClick={button.onClick}
                 iconRight={faBars}
-                iconTransform={'shrink-4'}
+                iconTransform="shrink-4"
                 lg
               />
-            )}
-          </div>
+            </div>
+          )}
         </section>
         {tabs.length > 0 && <PageTitleTabs sticky={sticky} tabs={tabs} />}
-      </PageTitleWrapper>
+      </header>
     </>
   );
 };
-
-PageTitle.displayName = 'PageTitle';
diff --git a/packages/ui-structure/src/PageTitleTabs/index.module.scss b/packages/ui-structure/src/PageTitleTabs/index.module.scss
new file mode 100644
index 0000000000..b3aa902773
--- /dev/null
+++ b/packages/ui-structure/src/PageTitleTabs/index.module.scss
@@ -0,0 +1,35 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+@import 'styles/theme/_variables';
+
+.pageTitleTabs {
+  border-bottom: 1px solid var(--border-primary-color);
+  overflow: hidden;
+  height: 3.6rem;
+  margin-top: 0.9rem;
+  max-width: 100%;
+
+  @media (max-width: $page-width-medium-threshold) {
+    margin-top: 0.5rem;
+  }
+}
+
+.pageTitleTabsInline {
+  border-bottom: none;
+}
+
+.pageTitleTabsSticky {
+  border-bottom: 0;
+  margin-top: 0.5rem;
+}
+
+.pageTitleTabsScroll {
+  width: 100%;
+  height: 4.5rem;
+  overflow: auto hidden;
+}
+
+.pageTitleTabsInner {
+  display: flex;  
+}
\ No newline at end of file
diff --git a/packages/ui-structure/src/PageTitleTabs/index.tsx b/packages/ui-structure/src/PageTitleTabs/index.tsx
new file mode 100644
index 0000000000..aa31e974ff
--- /dev/null
+++ b/packages/ui-structure/src/PageTitleTabs/index.tsx
@@ -0,0 +1,50 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { ButtonTab } from 'ui-buttons';
+import type { PageTitleProps, PageTitleTabProps } from '../types';
+import classNames from 'classnames';
+import classes from './index.module.scss';
+
+/**
+ * @name PageTitleTabs
+ * @summary The element in a page title, inculding ButtonTabs.
+ */
+export const PageTitleTabs = ({
+  sticky,
+  tabs = [],
+  inline = false,
+  tabClassName,
+  colorSecondary,
+}: PageTitleProps) => {
+  const buttonClasses = classNames(classes.pageTitleTabs, {
+    [classes.pageTitleTabsInline]: inline,
+    [classes.pageTitleTabsSticky]: sticky,
+  });
+
+  return (
+    <section className={buttonClasses}>
+      <div className={classes.pageTitleTabsScroll}>
+        <div className={classes.pageTitleTabsInner}>
+          {tabs.map(
+            (
+              { active, onClick, title, badge, disabled }: PageTitleTabProps,
+              i: number
+            ) => (
+              <ButtonTab
+                className={tabClassName}
+                active={!!active}
+                key={`page_tab_${i}`}
+                onClick={() => onClick()}
+                title={title}
+                colorSecondary={colorSecondary}
+                badge={badge}
+                disabled={disabled === undefined ? false : disabled}
+              />
+            )
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/packages/ui-structure/src/RowSection/index.module.scss b/packages/ui-structure/src/RowSection/index.module.scss
new file mode 100644
index 0000000000..29c0b408cb
--- /dev/null
+++ b/packages/ui-structure/src/RowSection/index.module.scss
@@ -0,0 +1,73 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+@import 'styles/theme/_variables';
+
+.rowPrimaryWrapper {
+  order: 0;
+  flex: 1;
+  flex-basis: 100%;
+  max-width: 100%;
+
+  @media (min-width: $page-width-medium-threshold) {
+    order: 0;
+    flex: 1;
+    flex-basis: 56%;
+    width: 56%;
+  }
+
+  @media (min-width: $row-section-thirds-threshold) {
+    flex-basis: 62%;
+    width: 62%;
+  }
+}
+
+.rowPrimaryWrapperFirst {
+  @media (min-width: $page-width-medium-threshold) {
+    padding-left: 0.75rem;
+    order: 1;
+  }
+}
+
+.rowPrimaryWrapperLast {
+  @media (min-width: $page-width-medium-threshold) {
+    padding-right: 0.75rem;
+  }
+}
+
+.rowSecondaryWrapper {
+  order: 0;
+  flex-basis: 100%;
+  width: 100%;
+  border-radius: 1rem;
+
+  @media (min-width: $page-width-medium-threshold) {
+    order: 0;
+    flex: 1;
+    flex-basis: 44%;
+    width: 44%;
+    max-width: none;
+  }
+
+  @media (min-width: $row-section-thirds-threshold) {
+    flex-basis: 38%;
+    max-width: 38%;
+  }
+}
+
+.rowSecondaryWrapperFirst {
+  @media (min-width: $page-width-medium-threshold) {
+    padding-left: 0.75rem;
+    order: 1;
+  }
+}
+
+.rowSecondaryWrapperLast {
+  @media (min-width: $page-width-medium-threshold) {
+    padding-right: 0.75rem;
+  }
+}
+
+.rowSSectionVLast {
+  order: 1;
+}
\ No newline at end of file
diff --git a/packages/ui-structure/src/RowSection/index.tsx b/packages/ui-structure/src/RowSection/index.tsx
new file mode 100644
index 0000000000..ed315f6320
--- /dev/null
+++ b/packages/ui-structure/src/RowSection/index.tsx
@@ -0,0 +1,43 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { RowSectionProps } from './types';
+import classes from './index.module.scss';
+import classNames from 'classnames';
+
+/**
+ * @name RowSection
+ * @summary Container for primary and secondary modules in a PageRow.
+ */
+export const RowSection = ({
+  children,
+  style,
+  vLast,
+  hLast,
+  secondary,
+}: RowSectionProps) => {
+  const mainClass = secondary
+    ? classes.rowSecondaryWrapper
+    : classes.rowPrimaryWrapper;
+
+  let hClass;
+  if (secondary) {
+    hClass = hLast
+      ? classes.rowSecondaryWrapperFirst
+      : classes.rowSecondaryWrapperLast;
+  } else {
+    hClass = hLast
+      ? classes.rowPrimaryWrapperFirst
+      : classes.rowPrimaryWrapperLast;
+  }
+
+  const buttonClasses = classNames(mainClass, hClass, {
+    [classes.rowSSectionVLast]: vLast,
+  });
+
+  return (
+    <div className={buttonClasses} style={style}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/ui-structure/src/RowSection/types.ts b/packages/ui-structure/src/RowSection/types.ts
new file mode 100644
index 0000000000..2acdb8e1d9
--- /dev/null
+++ b/packages/ui-structure/src/RowSection/types.ts
@@ -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';
+
+export type RowSectionProps = ComponentBase & {
+  // The CSS order of the component for vertical layouts.
+  vLast?: boolean;
+  // `true` means padding on the left and false means padding on the right.
+  hLast?: boolean;
+  // `true` means the secondary element and  false means the primary one.
+  secondary?: boolean;
+};
diff --git a/packages/app/src/kits/Structure/Separator/Wrapper.ts b/packages/ui-structure/src/Separator/index.module.scss
similarity index 73%
rename from packages/app/src/kits/Structure/Separator/Wrapper.ts
rename to packages/ui-structure/src/Separator/index.module.scss
index bb3c165b68..c666b9d819 100644
--- a/packages/app/src/kits/Structure/Separator/Wrapper.ts
+++ b/packages/ui-structure/src/Separator/index.module.scss
@@ -1,10 +1,8 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.separator {
   border-bottom: 1px solid var(--border-primary-color);
   margin: 0.67rem 0;
   width: 100%;
-`;
+}
\ No newline at end of file
diff --git a/packages/app/src/kits/Structure/Separator/index.tsx b/packages/ui-structure/src/Separator/index.tsx
similarity index 68%
rename from packages/app/src/kits/Structure/Separator/index.tsx
rename to packages/ui-structure/src/Separator/index.tsx
index cd2d8faa16..57cd56ff8b 100644
--- a/packages/app/src/kits/Structure/Separator/index.tsx
+++ b/packages/ui-structure/src/Separator/index.tsx
@@ -2,13 +2,14 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
+import classes from './index.module.scss';
 
 /**
  * @name Separator
- * @summary A horizontal spacer with a bottom border. General spacer for separating content by
- * row.
+ * @summary A horizontal spacer with a bottom border. General spacer for separating content by row.
  */
 export const Separator = ({ children, style }: ComponentBase) => (
-  <Wrapper style={style}>{children}</Wrapper>
+  <div className={classes.separator} style={style}>
+    {children}
+  </div>
 );
diff --git a/packages/app/src/kits/Structure/Side/Wrapper.ts b/packages/ui-structure/src/Side/index.module.scss
similarity index 56%
rename from packages/app/src/kits/Structure/Side/Wrapper.ts
rename to packages/ui-structure/src/Side/index.module.scss
index 114e613fc4..d242c1bb70 100644
--- a/packages/app/src/kits/Structure/Side/Wrapper.ts
+++ b/packages/ui-structure/src/Side/index.module.scss
@@ -1,10 +1,12 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageWidthMediumThreshold, SideMenuMinimisedWidth } from 'consts';
-import styled from 'styled-components';
+@import 'styles/theme/_variables';
 
-export const Wrapper = styled.div`
+.side {
+  /* maximised by default, or minimised otherwise. */
+  min-width: var(--core-side-width);
+  max-width: var(--core-side-width);
   z-index: 7;
   position: sticky;
   top: 0;
@@ -15,22 +17,20 @@ export const Wrapper = styled.div`
   overflow: hidden;
   transition: all 0.5s cubic-bezier(0.1, 1, 0.2, 1);
 
-  /* maximised by default, or minimised otherwise. */
-  min-width: var(--core-side-width);
-  max-width: var(--core-side-width);
-
-  &.minimised {
-    min-width: ${SideMenuMinimisedWidth}px;
-    max-width: ${SideMenuMinimisedWidth}px;
-  }
-
-  @media (max-width: ${PageWidthMediumThreshold}px) {
+  @media (max-width: $page-width-medium-threshold) {
     position: fixed;
     top: 0;
     left: 0;
+  }
+}
+
+.sideMinimised {
+  min-width: $side-menu-minimised-width;
+  max-width: $side-menu-minimised-width;
+}
 
-    &.hidden {
-      left: calc(var(--core-side-width) * -1);
-    }
+.sideHidden {
+  @media (max-width: $page-width-medium-threshold) {
+    left: calc(var(--core-side-width) * -1);
   }
-`;
+}
\ No newline at end of file
diff --git a/packages/ui-structure/src/Side/index.tsx b/packages/ui-structure/src/Side/index.tsx
new file mode 100644
index 0000000000..8412bc4bfe
--- /dev/null
+++ b/packages/ui-structure/src/Side/index.tsx
@@ -0,0 +1,34 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { CSSProperties } from 'react';
+import type { SideProps } from './types';
+import classNames from 'classnames';
+import classes from './index.module.scss';
+
+/**
+ * @name Side
+ * @summary An element that houses the side menu and transitions to a toggle-able fixed overlay on
+ * smaller screens.
+ * @summary Handles maximised and minimised transitions.
+ */
+export const Side = ({
+  children,
+  style,
+  open,
+  minimised,
+  width = '20rem',
+}: SideProps) => {
+  const vars = { '--core-side-width': width } as CSSProperties;
+
+  const classses = classNames(classes.side, {
+    [classes.sideHidden]: !open,
+    [classes.sideMinimised]: minimised,
+  });
+
+  return (
+    <div style={{ ...vars, ...style }} className={classses}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/ui-structure/src/Side/types.ts b/packages/ui-structure/src/Side/types.ts
new file mode 100644
index 0000000000..0843fd99fd
--- /dev/null
+++ b/packages/ui-structure/src/Side/types.ts
@@ -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';
+
+export type SideProps = ComponentBase & {
+  // Whether the side menu should be open on smaller screens.
+  open: boolean;
+  // Whether side menu is in minimised state.
+  minimised: boolean;
+  // Optional width property to be applied to maximised side.
+  width?: string | number;
+};
diff --git a/packages/app/src/kits/Structure/StatBoxRow/Wrapper.ts b/packages/ui-structure/src/StatBoxRow/index.module.scss
similarity index 68%
rename from packages/app/src/kits/Structure/StatBoxRow/Wrapper.ts
rename to packages/ui-structure/src/StatBoxRow/index.module.scss
index b15a7266e7..26b921df58 100644
--- a/packages/app/src/kits/Structure/StatBoxRow/Wrapper.ts
+++ b/packages/ui-structure/src/StatBoxRow/index.module.scss
@@ -1,9 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
+.statBoxRow {
   display: flex;
   flex-direction: column;
-`;
+}
\ No newline at end of file
diff --git a/packages/app/src/kits/Structure/StatBoxRow/index.tsx b/packages/ui-structure/src/StatBoxRow/index.tsx
similarity index 56%
rename from packages/app/src/kits/Structure/StatBoxRow/index.tsx
rename to packages/ui-structure/src/StatBoxRow/index.tsx
index 47992fd8d7..ae1e198485 100644
--- a/packages/app/src/kits/Structure/StatBoxRow/index.tsx
+++ b/packages/ui-structure/src/StatBoxRow/index.tsx
@@ -2,14 +2,19 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { ComponentBase } from '@w3ux/types';
-import { Wrapper } from './Wrapper';
+import classNames from 'classnames';
+import classes from './index.module.scss';
 
 /**
  * @name StatBoxRow
  * @summary Used to house a row of `StatBox` items.
  */
-export const StatBoxRow = ({ children, style }: ComponentBase) => (
-  <Wrapper className="page-padding" style={style}>
-    {children}
-  </Wrapper>
-);
+export const StatBoxRow = ({ children, style }: ComponentBase) => {
+  const divClasses = classNames('page-padding', classes.statBoxRow);
+
+  return (
+    <div className={divClasses} style={style}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/ui-structure/src/index.tsx b/packages/ui-structure/src/index.tsx
new file mode 100644
index 0000000000..cc339ec3fc
--- /dev/null
+++ b/packages/ui-structure/src/index.tsx
@@ -0,0 +1,16 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export * from './Body';
+export * from './ButtonRow';
+export * from './Entry';
+export * from './Main';
+export * from './Page';
+export * from './PageRow';
+export * from './PageHeading';
+export * from './PageTitle';
+export * from './PageTitleTabs';
+export * from './RowSection';
+export * from './Side';
+export * from './Separator';
+export * from './StatBoxRow';
diff --git a/packages/app/src/kits/Structure/PageTitleTabs/types.ts b/packages/ui-structure/src/types.ts
similarity index 66%
rename from packages/app/src/kits/Structure/PageTitleTabs/types.ts
rename to packages/ui-structure/src/types.ts
index 3a143bc145..ab6a621d25 100644
--- a/packages/app/src/kits/Structure/PageTitleTabs/types.ts
+++ b/packages/ui-structure/src/types.ts
@@ -1,6 +1,24 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import type { ComponentBase } from '@w3ux/types';
+
+export type RowProps = ComponentBase & {
+  // whether there is margin space vertically.
+  yMargin?: boolean;
+};
+
+export type PageTitleProps = PageTitleTabsProps & {
+  colorSecondary?: boolean;
+  tabClassName?: string;
+  inline?: boolean;
+  title?: string;
+  button?: {
+    title: string;
+    onClick: () => void;
+  };
+};
+
 export interface PageTitleTabsProps {
   // whether the title stick on the same position.
   sticky?: boolean;
diff --git a/packages/ui-structure/tsconfig.json b/packages/ui-structure/tsconfig.json
new file mode 100644
index 0000000000..f1aa975a6f
--- /dev/null
+++ b/packages/ui-structure/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "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": [
+    "../../env.d.ts",
+    "src"
+  ]
+}
diff --git a/release-please-config.json b/release-please-config.json
index e22ca953df..e35e30c0b8 100644
--- a/release-please-config.json
+++ b/release-please-config.json
@@ -3,6 +3,9 @@
   "include-component-in-tag": true,
   "packages": {
     "packages/app": {},
-    "packages/ui-buttons": {}
+    "packages/consts": {},
+    "packages/styles": {},
+    "packages/ui-buttons": {},
+    "packages/ui-structure": {}
   }
 }
diff --git a/yarn.lock b/yarn.lock
index b66eb441e9..aeb8541cf3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3207,92 +3207,92 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-arm64@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-darwin-arm64@npm:1.9.1"
+"@swc/core-darwin-arm64@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-darwin-arm64@npm:1.9.2"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-x64@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-darwin-x64@npm:1.9.1"
+"@swc/core-darwin-x64@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-darwin-x64@npm:1.9.2"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm-gnueabihf@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.9.1"
+"@swc/core-linux-arm-gnueabihf@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.9.2"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-gnu@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-linux-arm64-gnu@npm:1.9.1"
+"@swc/core-linux-arm64-gnu@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.9.2"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-musl@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-linux-arm64-musl@npm:1.9.1"
+"@swc/core-linux-arm64-musl@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-linux-arm64-musl@npm:1.9.2"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-gnu@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-linux-x64-gnu@npm:1.9.1"
+"@swc/core-linux-x64-gnu@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-linux-x64-gnu@npm:1.9.2"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-musl@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-linux-x64-musl@npm:1.9.1"
+"@swc/core-linux-x64-musl@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-linux-x64-musl@npm:1.9.2"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-win32-arm64-msvc@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-win32-arm64-msvc@npm:1.9.1"
+"@swc/core-win32-arm64-msvc@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.9.2"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-win32-ia32-msvc@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-win32-ia32-msvc@npm:1.9.1"
+"@swc/core-win32-ia32-msvc@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.9.2"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@swc/core-win32-x64-msvc@npm:1.9.1":
-  version: 1.9.1
-  resolution: "@swc/core-win32-x64-msvc@npm:1.9.1"
+"@swc/core-win32-x64-msvc@npm:1.9.2":
+  version: 1.9.2
+  resolution: "@swc/core-win32-x64-msvc@npm:1.9.2"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
 "@swc/core@npm:^1.7.26":
-  version: 1.9.1
-  resolution: "@swc/core@npm:1.9.1"
-  dependencies:
-    "@swc/core-darwin-arm64": "npm:1.9.1"
-    "@swc/core-darwin-x64": "npm:1.9.1"
-    "@swc/core-linux-arm-gnueabihf": "npm:1.9.1"
-    "@swc/core-linux-arm64-gnu": "npm:1.9.1"
-    "@swc/core-linux-arm64-musl": "npm:1.9.1"
-    "@swc/core-linux-x64-gnu": "npm:1.9.1"
-    "@swc/core-linux-x64-musl": "npm:1.9.1"
-    "@swc/core-win32-arm64-msvc": "npm:1.9.1"
-    "@swc/core-win32-ia32-msvc": "npm:1.9.1"
-    "@swc/core-win32-x64-msvc": "npm:1.9.1"
+  version: 1.9.2
+  resolution: "@swc/core@npm:1.9.2"
+  dependencies:
+    "@swc/core-darwin-arm64": "npm:1.9.2"
+    "@swc/core-darwin-x64": "npm:1.9.2"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.9.2"
+    "@swc/core-linux-arm64-gnu": "npm:1.9.2"
+    "@swc/core-linux-arm64-musl": "npm:1.9.2"
+    "@swc/core-linux-x64-gnu": "npm:1.9.2"
+    "@swc/core-linux-x64-musl": "npm:1.9.2"
+    "@swc/core-win32-arm64-msvc": "npm:1.9.2"
+    "@swc/core-win32-ia32-msvc": "npm:1.9.2"
+    "@swc/core-win32-x64-msvc": "npm:1.9.2"
     "@swc/counter": "npm:^0.1.3"
-    "@swc/types": "npm:^0.1.14"
+    "@swc/types": "npm:^0.1.15"
   peerDependencies:
     "@swc/helpers": "*"
   dependenciesMeta:
@@ -3319,7 +3319,7 @@ __metadata:
   peerDependenciesMeta:
     "@swc/helpers":
       optional: true
-  checksum: 10c0/7b9a3da9bdd95216b031739ebe35983e69f17284809a62706c93edfd30ede0732060d944db23007aca9aebbc49859eb5784454c8882ae6fd04eb8bd15ac6a247
+  checksum: 10c0/697e601fa1246367ca67e87e87c45f6341373ae98d8d24c9586c4069660c73f8675bf94b86cf218308395eda8e355ae076fc8c9c8f7aaa50898c228db38b637d
   languageName: node
   linkType: hard
 
@@ -3330,12 +3330,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/types@npm:^0.1.14":
-  version: 0.1.14
-  resolution: "@swc/types@npm:0.1.14"
+"@swc/types@npm:^0.1.15":
+  version: 0.1.15
+  resolution: "@swc/types@npm:0.1.15"
   dependencies:
     "@swc/counter": "npm:^0.1.3"
-  checksum: 10c0/5ab5a213f25fbb038e8b2fa001a20c64363f81c199319373ed0228f316c046a996758fbaf906ba84d297b35e37727082d27974266db320e534da594716626529
+  checksum: 10c0/82bcfa64e53c6c93ae162fe9e491e5f300227fad6f110e32d9718e5a0e29586bc79c516234f6eccbe5ccd7ed72b514a21f03196a54408cf1b7b47c072fad44f0
   languageName: node
   linkType: hard
 
@@ -4423,6 +4423,7 @@ __metadata:
     chart.js: "npm:^4.4.4"
     chroma-js: "npm:^3.1.1"
     compare-versions: "npm:^6.1.1"
+    consts: "workspace:*"
     date-fns: "npm:^4.1.0"
     framer-motion: "npm:^11.11.1"
     html5-qrcode: "npm:^2.3.8"
@@ -4441,7 +4442,9 @@ __metadata:
     react-router-dom: "npm:^6.23.1"
     react-scroll: "npm:^1.9.0"
     styled-components: "npm:^6.1.13"
+    styles: "workspace:*"
     ui-buttons: "workspace:*"
+    ui-structure: "workspace:*"
     usehooks-ts: "npm:^3.0.2"
     viem: "npm:^2.21.35"
     vite: "npm:^5.2.12"
@@ -4846,9 +4849,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001669":
-  version: 1.0.30001679
-  resolution: "caniuse-lite@npm:1.0.30001679"
-  checksum: 10c0/87fb89c5cb5130e40fa97b110fe175ea1104c359e4882aa5e277f824fbd33aa024f26d41a25f7d214db985f43d5b148c44e363965d17b36660b126a03e75e6e0
+  version: 1.0.30001680
+  resolution: "caniuse-lite@npm:1.0.30001680"
+  checksum: 10c0/11a4e7f6f5d5f965cfd4b7dc4aef34e12a26e99647f02b5ac9fd7f7670845473b95ada416a785473237e4b1b67281f7b043c8736c85b77097f6b697e8950b15f
   languageName: node
   linkType: hard
 
@@ -5108,6 +5111,14 @@ __metadata:
   languageName: node
   linkType: hard
 
+"consts@workspace:*, consts@workspace:packages/consts":
+  version: 0.0.0-use.local
+  resolution: "consts@workspace:packages/consts"
+  dependencies:
+    "@polkadot/util": "npm:^13.2.2"
+  languageName: unknown
+  linkType: soft
+
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -8702,7 +8713,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
@@ -8860,13 +8871,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.4.43":
-  version: 8.4.47
-  resolution: "postcss@npm:8.4.47"
+  version: 8.4.48
+  resolution: "postcss@npm:8.4.48"
   dependencies:
     nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.1.0"
+    picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10c0/929f68b5081b7202709456532cee2a145c1843d391508c5a09de2517e8c4791638f71dd63b1898dba6712f8839d7a6da046c72a5e44c162e908f5911f57b5f44
+  checksum: 10c0/d586361fda12fc7ab5650ce9b5763fc61d6ea2cecac9da98fceea6a3f27e42ed34db830582411bc06743492d9bb414c52b0c81da65440682d244d692da2f928a
   languageName: node
   linkType: hard
 
@@ -10251,6 +10262,14 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styles@workspace:*, styles@workspace:packages/styles":
+  version: 0.0.0-use.local
+  resolution: "styles@workspace:packages/styles"
+  dependencies:
+    "@polkadot/util": "npm:^13.2.2"
+  languageName: unknown
+  linkType: soft
+
 "stylis@npm:4.3.2":
   version: 4.3.2
   resolution: "stylis@npm:4.3.2"
@@ -10596,6 +10615,16 @@ __metadata:
   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"
+  dependencies:
+    "@fortawesome/react-fontawesome": "npm:^0.2.2"
+    "@w3ux/types": "npm:^0.2.0"
+    "@w3ux/utils": "npm:^1.1.1-beta.9"
+  languageName: unknown
+  linkType: soft
+
 "uint8arrays@npm:3.1.0":
   version: 3.1.0
   resolution: "uint8arrays@npm:3.1.0"
@@ -11018,8 +11047,8 @@ __metadata:
   linkType: hard
 
 "vite-tsconfig-paths@npm:^5.0.1":
-  version: 5.1.1
-  resolution: "vite-tsconfig-paths@npm:5.1.1"
+  version: 5.1.2
+  resolution: "vite-tsconfig-paths@npm:5.1.2"
   dependencies:
     debug: "npm:^4.1.1"
     globrex: "npm:^0.1.2"
@@ -11029,13 +11058,13 @@ __metadata:
   peerDependenciesMeta:
     vite:
       optional: true
-  checksum: 10c0/7d18e2f6daa057e21885bffd3dc751f2a8fe1f249a70e4ca35b944c505d1b59d6e7c3f2278afef5139aa4cabdcb307567d3d26f2009dcccff4281c485c89a231
+  checksum: 10c0/7db445b6b1f48e7b89f39f5eb8cf4ea645994f581fcc7c9fac721e0c36f8203c0770007ec27825caa6e2566e3127b2b1bfe8be28ca05cd0e9fb67a2943dcdec5
   languageName: node
   linkType: hard
 
 "vite@npm:^5.0.0, vite@npm:^5.2.12":
-  version: 5.4.10
-  resolution: "vite@npm:5.4.10"
+  version: 5.4.11
+  resolution: "vite@npm:5.4.11"
   dependencies:
     esbuild: "npm:^0.21.3"
     fsevents: "npm:~2.3.3"
@@ -11072,7 +11101,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/4ef4807d2fd166a920de244dbcec791ba8a903b017a7d8e9f9b4ac40d23f8152c1100610583d08f542b47ca617a0505cfc5f8407377d610599d58296996691ed
+  checksum: 10c0/d536bb7af57dd0eca2a808f95f5ff1d7b7ffb8d86e17c6893087680a0448bd0d15e07475270c8a6de65cb5115592d037130a1dd979dc76bcef8c1dda202a1874
   languageName: node
   linkType: hard