diff --git a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
index 4b96229fa6..1fbfbaa584 100644
--- a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
+++ b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
@@ -1,7 +1,12 @@
 'use client';
 
 import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
-import { Modal, ModalContent, useModal } from '@webb-tools/webb-ui-components';
+import {
+  EMPTY_VALUE_PLACEHOLDER,
+  Modal,
+  ModalContent,
+  useModal,
+} from '@webb-tools/webb-ui-components';
 import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
@@ -134,10 +139,11 @@ const AmountAndTokenInput: FC = () => {
   }, [tokenBalances, selectedToken.id]);
 
   return (
-    <div className="relative">
+    <div className="flex flex-col gap-2 justify-center items-end">
       <div
         className={twMerge(
-          'w-full flex items-center gap-2 bg-mono-20 dark:bg-mono-170 rounded-lg pr-4',
+          'w-full flex items-center gap-2 rounded-lg pr-4',
+          'bg-mono-20 dark:bg-mono-180',
           isAmountInputError && 'border border-red-70 dark:border-red-50',
         )}
       >
@@ -150,7 +156,7 @@ const AmountAndTokenInput: FC = () => {
             isFullWidth: true,
           }}
           placeholder=""
-          wrapperClassName="!pr-0 !border-0"
+          wrapperClassName="!pr-0 !border-0 dark:bg-mono-180"
           max={balance ? convertDecimalToBn(balance, decimals) : null}
           maxErrorMessage="Insufficient balance"
           min={minAmount ? convertDecimalToBn(minAmount, decimals) : null}
@@ -159,7 +165,6 @@ const AmountAndTokenInput: FC = () => {
           setErrorMessage={(error) =>
             setIsAmountInputError(error ? true : false)
           }
-          errorMessageClassName="absolute left-0 bottom-[-24px] !text-[14px] !leading-[21px]"
         />
 
         {/* Token Selector */}
@@ -167,7 +172,7 @@ const AmountAndTokenInput: FC = () => {
           value={selectedToken.symbol}
           iconType="token"
           onClick={openTokenModal}
-          className="w-[130px] border-0 px-3 bg-mono-40 dark:bg-mono-140"
+          className="min-w-[130px]"
           status="success"
         />
       </div>
@@ -178,14 +183,11 @@ const AmountAndTokenInput: FC = () => {
           className="w-[100px] absolute right-0 bottom-[-24px]"
         />
       ) : (
-        <Typography
-          variant="body2"
-          className="absolute right-0 bottom-[-24px] text-mono-120 dark:text-mono-100"
-        >
+        <Typography variant="body2">
           Balance:{' '}
           {selectedAssetBalance !== null
             ? `${selectedAssetBalance.toString()} ${selectedToken.symbol}`
-            : 'N/A'}
+            : EMPTY_VALUE_PLACEHOLDER}
         </Typography>
       )}
 
diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
index 6f771a2214..c4acfb7f82 100644
--- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Card } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { FC, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -14,9 +15,9 @@ import ChainSelectors from './ChainSelectors';
 import FeeDetails from './FeeDetails';
 import useActionButton from './hooks/useActionButton';
 
-interface BridgeContainerProps {
+type BridgeContainerProps = {
   className?: string;
-}
+};
 
 const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
   const {
@@ -46,50 +47,50 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
 
   return (
     <>
-      <div
+      <Card
+        withShadow
         className={twMerge(
-          'max-w-[640px] min-h-[580px] bg-mono-0 dark:bg-mono-190 p-5 md:p-8 rounded-xl',
-          'shadow-webb-lg dark:shadow-webb-lg-dark',
-          'flex flex-col',
+          'flex flex-col gap-7 w-full max-w-[590px]',
           className,
         )}
       >
-        <div className="flex flex-col justify-between flex-1">
-          <div className="flex flex-col gap-10">
-            <ChainSelectors />
-
-            <AmountAndTokenInput />
+        <div className="flex flex-col gap-7">
+          <ChainSelectors />
 
-            <AddressInput
-              id="bridge-destination-address-input"
-              type={
-                isEVMChain(selectedDestinationChain)
-                  ? AddressType.EVM
-                  : AddressType.Substrate
-              }
-              title="Recipient Address"
-              wrapperOverrides={{ isFullWidth: true }}
-              value={destinationAddress}
-              setValue={setDestinationAddress}
-              setErrorMessage={(error) =>
-                setIsAddressInputError(error ? true : false)
-              }
-            />
+          <AmountAndTokenInput />
 
-            {!hideFeeDetails && <FeeDetails />}
-          </div>
+          <AddressInput
+            id="bridge-destination-address-input"
+            type={
+              isEVMChain(selectedDestinationChain)
+                ? AddressType.EVM
+                : AddressType.Substrate
+            }
+            title="Recipient Address"
+            wrapperOverrides={{
+              isFullWidth: true,
+              wrapperClassName: 'dark:bg-mono-180',
+            }}
+            value={destinationAddress}
+            setValue={setDestinationAddress}
+            setErrorMessage={(error) =>
+              setIsAddressInputError(error ? true : false)
+            }
+          />
 
-          <Button
-            isFullWidth
-            isDisabled={isDisabled}
-            isLoading={isLoading}
-            onClick={buttonAction}
-            loadingText={buttonLoadingText}
-          >
-            {buttonText}
-          </Button>
+          {!hideFeeDetails && <FeeDetails />}
         </div>
-      </div>
+
+        <Button
+          isFullWidth
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          onClick={buttonAction}
+          loadingText={buttonLoadingText}
+        >
+          {buttonText}
+        </Button>
+      </Card>
 
       <BridgeConfirmationModal
         isOpen={isConfirmModalOpen}
diff --git a/apps/tangle-dapp/app/bridge/ChainSelectors.tsx b/apps/tangle-dapp/app/bridge/ChainSelectors.tsx
index 8cde93da7d..a87efdaa20 100644
--- a/apps/tangle-dapp/app/bridge/ChainSelectors.tsx
+++ b/apps/tangle-dapp/app/bridge/ChainSelectors.tsx
@@ -90,7 +90,7 @@ const ChainSelectors: FC = () => {
   return (
     <div className="flex flex-col md:flex-row justify-center md:justify-between items-center md:items-end md:gap-3">
       {/* Source Chain Selector */}
-      <div className="flex flex-col gap-2 w-full">
+      <div className="flex flex-col gap-2 flex-1">
         <Label
           className="text-mono-120 dark:text-mono-120 font-bold"
           htmlFor="bridge-source-chain-selector"
@@ -100,8 +100,7 @@ const ChainSelectors: FC = () => {
 
         <ChainOrTokenButton
           value={selectedSourceChain.name}
-          textClassName="text-xl"
-          className="w-full !p-4 bg-mono-20 dark:bg-mono-170 border-0 hover:bg-mono-20 dark:hover:bg-mono-170 text-nowrap"
+          className="w-full min-h-[72px] dark:bg-mono-180"
           iconType="chain"
           onClick={openSourceChainModal}
           disabled={sourceChainOptions.length <= 1}
@@ -109,14 +108,14 @@ const ChainSelectors: FC = () => {
       </div>
 
       <div
-        className="cursor-pointer px-1 pt-5 md:pt-0 md:pb-5"
+        className="flex-shrink cursor-pointer px-1 pt-5 md:pt-0 md:pb-5"
         onClick={onSwitchChains}
       >
         <ArrowRight size="lg" className="rotate-90 md:rotate-0" />
       </div>
 
       {/* Destination Chain Selector */}
-      <div className="flex flex-col gap-2 w-full">
+      <div className="flex flex-col gap-2 flex-1">
         <Label
           className="text-mono-120 dark:text-mono-120 font-bold"
           htmlFor="bridge-destination-chain-selector"
@@ -126,8 +125,7 @@ const ChainSelectors: FC = () => {
 
         <ChainOrTokenButton
           value={selectedDestinationChain.name}
-          textClassName="text-xl"
-          className="w-full !p-4 bg-mono-20 dark:bg-mono-170 border-0 hover:bg-mono-20 dark:hover:bg-mono-170 text-nowrap"
+          className="w-full min-h-[72px] dark:bg-mono-180"
           iconType="chain"
           onClick={openDestinationChainModal}
           disabled={destinationChainOptions.length <= 1}
diff --git a/apps/tangle-dapp/app/bridge/FeeDetails.tsx b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
index b92bd04a4a..0e11e16acc 100644
--- a/apps/tangle-dapp/app/bridge/FeeDetails.tsx
+++ b/apps/tangle-dapp/app/bridge/FeeDetails.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components';
 import FeeDetailsCmp from '@webb-tools/webb-ui-components/components/FeeDetails';
 import type { FeeItem } from '@webb-tools/webb-ui-components/components/FeeDetails/types';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
@@ -93,7 +94,9 @@ const FeeValueCmp: FC<{ fee: Decimal | null; symbol: string }> = ({
 }) => {
   return (
     <Typography variant="body1" className="!text-mono-200 dark:!text-mono-0">
-      {fee ? `${fee.toDecimalPlaces(5).toString()} ${symbol}` : 'N/A'}
+      {fee
+        ? `${fee.toDecimalPlaces(5).toString()} ${symbol}`
+        : EMPTY_VALUE_PLACEHOLDER}
     </Typography>
   );
 };
@@ -104,9 +107,16 @@ function formatTotalAmount(
   const symbolTotals: Record<string, Decimal> = {};
 
   for (const [, item] of Object.entries(feeItems)) {
-    if (item === null) continue;
+    if (item === null) {
+      continue;
+    }
+
     const { amount, symbol } = item;
-    if (!amount) continue;
+
+    if (!amount) {
+      continue;
+    }
+
     symbolTotals[symbol] = (symbolTotals[symbol] ?? new Decimal(0)).plus(
       amount,
     );
diff --git a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
index 82623e5667..35a06dc8d9 100644
--- a/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
+++ b/apps/tangle-dapp/app/bridge/hooks/useActionButton.ts
@@ -155,9 +155,11 @@ export default function useActionButton({
   ]);
 
   const buttonLoadingText = useMemo(() => {
-    if (isRequiredToConnectWallet || isSelectedNetworkAndSourceChainMismatch)
-      return 'Connecting...';
-    if (isTransferring) return 'Transferring...';
+    if (isRequiredToConnectWallet || isSelectedNetworkAndSourceChainMismatch) {
+      return 'Connecting';
+    } else if (isTransferring) {
+      return 'Transferring';
+    }
   }, [
     isRequiredToConnectWallet,
     isSelectedNetworkAndSourceChainMismatch,
diff --git a/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts b/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts
index dda457210f..7bb33285e7 100644
--- a/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts
+++ b/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts
@@ -1,7 +1,7 @@
 import { ApiPromise } from '@polkadot/api';
 import Decimal from 'decimal.js';
 
-import { calculateTransferrableBalance } from '../../../../utils/polkadot/balance';
+import { calculateTransferableBalance } from '../../../../utils/polkadot/balance';
 
 export async function getSubstrateNativeTransferable(params?: {
   api: ApiPromise;
@@ -10,7 +10,7 @@ export async function getSubstrateNativeTransferable(params?: {
   if (!params) return null;
   const { api, accAddress } = params;
   const accInfo = (await api.query.system.account(accAddress)).data;
-  const transferable = calculateTransferrableBalance(accInfo);
+  const transferable = calculateTransferableBalance(accInfo);
 
   // Convert to the right format based on the chain's decimals
   return new Decimal(transferable.toString()).div(
diff --git a/apps/tangle-dapp/app/bridge/page.tsx b/apps/tangle-dapp/app/bridge/page.tsx
index 6cdf0d28fe..59eefebbf3 100644
--- a/apps/tangle-dapp/app/bridge/page.tsx
+++ b/apps/tangle-dapp/app/bridge/page.tsx
@@ -1,15 +1,6 @@
-import {
-  ExchangeFunds,
-  TokenSwapLineIcon,
-  WalletLineIcon,
-} from '@webb-tools/icons';
-import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants';
-import { TANGLE_DOCS_URL } from '@webb-tools/webb-ui-components';
 import { Metadata } from 'next';
 import { FC } from 'react';
 
-import OnboardingItem from '../../components/OnboardingModal/OnboardingItem';
-import OnboardingModal from '../../components/OnboardingModal/OnboardingModal';
 import createPageMetadata from '../../utils/createPageMetadata';
 import BridgeContainer from './BridgeContainer';
 
@@ -18,35 +9,7 @@ export const metadata: Metadata = createPageMetadata({
 });
 
 const Bridge: FC = () => {
-  return (
-    <div>
-      <OnboardingModal
-        title="Get Started with Bridging"
-        pageKey={OnboardingPageKey.BRIDGE}
-        learnMoreHref={TANGLE_DOCS_URL}
-      >
-        <OnboardingItem
-          Icon={WalletLineIcon}
-          title="Connect EVM or Substrate Wallet"
-          description="Connect your EVM or Substrate wallet depending on the intended source chain. For example, if bridging in assets from Ethereum, connect your MetaMask or EVM-based wallet."
-        />
-
-        <OnboardingItem
-          Icon={ExchangeFunds}
-          title="Bridge EVM Assets"
-          description="Select source and destination chains, amount, and the recipient account's address to bridge in your EVM-based assets into Tangle to start restaking."
-        />
-
-        <OnboardingItem
-          Icon={TokenSwapLineIcon}
-          title="Restake Your Assets"
-          description="After bridging, use the restake page to leverage your bridged assets in restaking in order to earn yield and help secure and power Blueprint services on Tangle."
-        />
-      </OnboardingModal>
-
-      <BridgeContainer className="mx-auto" />
-    </div>
-  );
+  return <BridgeContainer className="mx-auto" />;
 };
 
 export default Bridge;
diff --git a/apps/tangle-dapp/app/claim/layout.tsx b/apps/tangle-dapp/app/claim/layout.tsx
index 98277d639e..f6d590ba2b 100644
--- a/apps/tangle-dapp/app/claim/layout.tsx
+++ b/apps/tangle-dapp/app/claim/layout.tsx
@@ -1,3 +1,4 @@
+import { Card, CardVariant } from '@webb-tools/webb-ui-components';
 import { Divider } from '@webb-tools/webb-ui-components/components/Divider';
 import { AppTemplate } from '@webb-tools/webb-ui-components/containers/AppTemplate';
 import FAQSection from '@webb-tools/webb-ui-components/containers/FAQSection';
@@ -19,17 +20,19 @@ export const metadata: Metadata = createPageMetadata({
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <AppTemplate.Root className="bg-glass dark:bg-glass_dark">
-      {children}
+    <AppTemplate.Root className="border-none p-0 rounded-none">
+      <Card variant={CardVariant.GLASS} className="space-y-4 py-8">
+        {children}
 
-      <Divider className="my-16 bg-mono-180 dark:bg-mono-120" />
+        <Divider className="my-16 bg-mono-180 dark:bg-mono-120" />
 
-      <AppTemplate.Content>
-        <FAQSection
-          items={faqItems}
-          answerClassName="[&_a:hover]:text-mono-100 [&_a]:underline"
-        />
-      </AppTemplate.Content>
+        <AppTemplate.Content className="w-full">
+          <FAQSection
+            items={faqItems}
+            answerClassName="[&_a:hover]:text-mono-100 [&_a]:underline"
+          />
+        </AppTemplate.Content>
+      </Card>
     </AppTemplate.Root>
   );
 };
diff --git a/apps/tangle-dapp/app/liquid-staking/page.tsx b/apps/tangle-dapp/app/liquid-staking/page.tsx
index f061938a79..80c2974375 100644
--- a/apps/tangle-dapp/app/liquid-staking/page.tsx
+++ b/apps/tangle-dapp/app/liquid-staking/page.tsx
@@ -1,13 +1,6 @@
 'use client';
 
-import {
-  AddLineIcon,
-  CoinIcon,
-  EditLine,
-  Search,
-  WaterDropletIcon,
-} from '@webb-tools/icons';
-import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants';
+import { AddLineIcon } from '@webb-tools/icons';
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
 import useNetworkSwitcher from '@webb-tools/tangle-shared-ui/hooks/useNetworkSwitcher';
 import {
@@ -16,15 +9,12 @@ import {
   TabsList as WebbTabsList,
   TabsRoot,
   TabTrigger,
-  TANGLE_DOCS_LIQUID_STAKING_URL,
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { FC, useEffect, useState } from 'react';
 
 import LsStakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsStakeCard';
 import LsUnstakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsUnstakeCard';
-import OnboardingItem from '../../components/OnboardingModal/OnboardingItem';
-import OnboardingModal from '../../components/OnboardingModal/OnboardingModal';
 import { LsSearchParamKey } from '../../constants/liquidStaking/types';
 import LsCreatePoolModal from '../../containers/LsCreatePoolModal';
 import LsMyProtocolsTable from '../../containers/LsMyProtocolsTable';
@@ -96,58 +86,7 @@ const LiquidStakingPage: FC = () => {
         setIsOpen={setIsCreatePoolModalOpen}
       />
 
-      <OnboardingModal
-        title="Get Started with Liquid Staking"
-        pageKey={OnboardingPageKey.LIQUID_STAKING}
-        learnMoreHref={TANGLE_DOCS_LIQUID_STAKING_URL}
-      >
-        <OnboardingItem
-          Icon={Search}
-          title="Explore Liquid Staking Pools"
-          description="Browse existing liquid staking pools on Tangle or the Restaking Parachain. Sort them by APY, TVL, or create your own pool."
-        />
-
-        <OnboardingItem
-          Icon={WaterDropletIcon}
-          title="Stake Your Assets"
-          description="Select a pool, enter the amount you'd like to stake, and click 'Stake' to start staking in the pool."
-        />
-
-        <OnboardingItem
-          Icon={EditLine}
-          title="View and Manage Your Pools"
-          description="After staking, use the 'My Pools' tab to view, increase stake, unstake, or manage your pools."
-        />
-
-        <OnboardingItem
-          Icon={CoinIcon}
-          title="Obtain LSTs"
-          description="When you join a pool, you'll automatically receive its derivative asset, which can be traded and used within Tangle's restaking infrastructure while automatically earning staking rewards."
-        />
-      </OnboardingModal>
-
       <div className="flex flex-col items-stretch gap-10">
-        <div className="flex flex-row items-center justify-between w-full p-6 space-y-0 overflow-x-auto rounded-2xl bg-liquid_staking_banner dark:bg-liquid_staking_banner_dark">
-          <div className="flex flex-col gap-2">
-            <Typography variant="h5" fw="bold">
-              Tangle Liquid Staking
-            </Typography>
-
-            <Typography
-              variant="body1"
-              className="text-mono-120 dark:text-mono-100"
-            >
-              Mint Liquid Staking Tokens (LSTs) to earn rewards & restake on
-              Tangle Mainnet.
-            </Typography>
-          </div>
-
-          {/** TODO: Waiting for price fetching API before showing this part. */}
-          {/* <div className="flex h-full gap-6">
-            <StatItem title="$123.01" subtitle="My Total Staking" />
-          </div> */}
-        </div>
-
         <div className="flex flex-col self-center gap-4 w-full max-w-[532px]">
           <TabsList className="w-full">
             <TabListItem
diff --git a/apps/tangle-dapp/app/loading.tsx b/apps/tangle-dapp/app/loading.tsx
index 375787dca0..b9c23eae7d 100644
--- a/apps/tangle-dapp/app/loading.tsx
+++ b/apps/tangle-dapp/app/loading.tsx
@@ -1,5 +1,4 @@
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography/Typography';
 import type { FC } from 'react';
 
 const LoadingPage: FC = () => {
@@ -11,9 +10,7 @@ const LoadingPage: FC = () => {
         <SkeletonLoader className="rounded-2xl min-h-[170px] xl:min-h-[274px]" />
       </div>
 
-      <Typography variant="h4" fw="bold">
-        Balances
-      </Typography>
+      <SkeletonLoader className="rounded-2xl min-h-[40px] max-w-[130px]" />
 
       <SkeletonLoader className="rounded-2xl h-[190px]" />
     </div>
diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx
index 47660fe49b..fa65f3317c 100644
--- a/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx
+++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx
@@ -15,7 +15,7 @@ import { shortenString } from '@webb-tools/webb-ui-components/utils/shortenStrin
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { TangleCard } from '../../../components';
+import { GlassCardWithLogo } from '../../../components';
 import ValidatorSocials from '../../../components/ValidatorSocials';
 import useValidatorInfoCard from '../../../data/validatorDetails/useValidatorInfoCard';
 import ValueSkeleton from './ValueSkeleton';
@@ -35,7 +35,7 @@ const InfoCard: FC<InfoCardProps> = ({
     useValidatorInfoCard(rpcEndpoint, validatorAddress);
 
   return (
-    <TangleCard className={twMerge('min-h-[300px]', className)}>
+    <GlassCardWithLogo className={twMerge('min-h-[300px]', className)}>
       <div className="w-full space-y-9">
         <div className="flex gap-2">
           <Avatar
@@ -114,7 +114,7 @@ const InfoCard: FC<InfoCardProps> = ({
           location={undefined}
         />
       </div>
-    </TangleCard>
+    </GlassCardWithLogo>
   );
 };
 
diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx
index 4052ea11e5..9ab9b97120 100644
--- a/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx
+++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx
@@ -8,15 +8,12 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import {
-  Chip,
-  fuzzyFilter,
-  Table,
-  Typography,
-} from '@webb-tools/webb-ui-components';
+import { fuzzyFilter, Table, Typography } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import cx from 'classnames';
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 
+import { TableStatus } from '../../../components';
 import ContainerSkeleton from '../../../components/skeleton/ContainerSkeleton';
 import { HeaderCell } from '../../../components/tableCells';
 import useNodeSpecifications from '../../../data/validatorDetails/useNodeSpecifications';
@@ -30,65 +27,42 @@ const columnHelper = createColumnHelper<NodeSpecification>();
 
 const columns = [
   columnHelper.accessor('os', {
-    header: () => (
-      <HeaderCell title="Operating System" className="justify-start" />
+    header: () => <HeaderCell title="OS" className="justify-start" />,
+    cell: (props) => (
+      <Typography variant="body1">
+        {props.getValue()} {props.row.original.isVirtualMachine && 'VM'}
+      </Typography>
+    ),
+  }),
+  columnHelper.accessor('linuxDistribution', {
+    header: () => <HeaderCell title="Distribution" className="justify-start" />,
+    cell: (props) => (
+      <Typography variant="body1">{props.getValue()}</Typography>
     ),
-    cell: (props) => {
-      return <Chip color="dark-grey">{props.getValue()}</Chip>;
-    },
   }),
   columnHelper.accessor('version', {
     header: () => <HeaderCell title="Version" className="justify-start" />,
-    cell: (props) => {
-      return (
-        <Chip color="dark-grey" className="">
-          {props.getValue()}
-        </Chip>
-      );
-    },
+    cell: (props) => (
+      <Typography variant="body1">{props.getValue()}</Typography>
+    ),
+  }),
+  columnHelper.accessor('linuxKernel', {
+    header: () => <HeaderCell title="Kernel" className="justify-start" />,
+    cell: (props) => (
+      <Typography variant="body1">{props.getValue()}</Typography>
+    ),
   }),
   columnHelper.accessor('cpuCores', {
     header: () => <HeaderCell title="CPU Cores" className="justify-start" />,
-    cell: (props) => {
-      return <Chip color="dark-grey">{props.getValue()}</Chip>;
-    },
+    cell: (props) => (
+      <Typography variant="body1">{props.getValue()}</Typography>
+    ),
   }),
   columnHelper.accessor('memory', {
     header: () => <HeaderCell title="Memory" className="justify-start" />,
-    cell: (props) => {
-      return <Chip color="dark-grey">{props.getValue()}GB</Chip>;
-    },
-  }),
-  columnHelper.accessor('isVirtualMachine', {
-    header: () => (
-      <HeaderCell title="Is Virtual Machine?" className="justify-start" />
+    cell: (props) => (
+      <Typography variant="body1">{props.getValue()}GB</Typography>
     ),
-    cell: (props) => {
-      return (
-        <Chip
-          color="dark-grey"
-          className={cx({
-            '!bg-mono-120 dark:!bg-mono-100': !props.getValue(),
-          })}
-        >
-          {props.getValue() ? 'Yes' : 'No'}
-        </Chip>
-      );
-    },
-  }),
-  columnHelper.accessor('linuxDistribution', {
-    header: () => (
-      <HeaderCell title="Linux Distribution" className="justify-start" />
-    ),
-    cell: (props) => {
-      return <Chip color="dark-grey">{props.getValue()}</Chip>;
-    },
-  }),
-  columnHelper.accessor('linuxKernel', {
-    header: () => <HeaderCell title="Linux Kernel" className="justify-start" />,
-    cell: (props) => {
-      return <Chip color="dark-grey">{props.getValue()}</Chip>;
-    },
   }),
 ];
 
@@ -96,7 +70,8 @@ const NodeSpecificationsTable: FC<NodeSpecificationsTableProps> = ({
   validatorAddress,
 }) => {
   const { data, isLoading, error } = useNodeSpecifications(validatorAddress);
-  const nodeSpecifications = useMemo(() => data.nodeSpecifications, [data]);
+
+  const nodeSpecifications = data.nodeSpecifications;
 
   const table = useReactTable({
     data: nodeSpecifications,
@@ -117,40 +92,32 @@ const NodeSpecificationsTable: FC<NodeSpecificationsTableProps> = ({
         Node Specifications
       </Typography>
 
-      <div
-        className={cx(
-          'min-h-[120px] bg-glass dark:bg-glass_dark py-3 px-4 rounded-2xl overflow-x-auto',
-          'flex flex-col',
-          'border border-mono-0 dark:border-mono-160',
-        )}
-      >
+      <div className={cx('min-h-[120px] overflow-x-auto', 'flex flex-col')}>
         {/* Loading */}
         {isLoading && <ContainerSkeleton numOfRows={2} />}
 
         {/* Error */}
-        {!isLoading && error && (
-          <div className="flex-1 flex items-center justify-center">
-            <Typography variant="body1">
-              Oops! There was an error when retrieving the data
-            </Typography>
-          </div>
+        {!isLoading && error !== null && (
+          <TableStatus
+            icon="⚠️"
+            title="Failed to Load Data"
+            description={`Sorry, there was an error while retrieving the data: ${error.message}`}
+          />
         )}
 
         {/* No data */}
-        {!isLoading && !error && nodeSpecifications.length === 0 && (
-          <div className="flex-1 flex items-center justify-center">
-            <Typography variant="body1">
-              No node specifications from this validator was found!
-            </Typography>
-          </div>
+        {!isLoading && error === null && nodeSpecifications.length === 0 && (
+          <TableStatus
+            icon="🔍"
+            title="No Specifications"
+            description="There is no node specifications associated with this specific validator."
+          />
         )}
 
-        {/* Successfully get the data */}
-        {!isLoading && !error && nodeSpecifications.length > 0 && (
+        {/* Success; show the table */}
+        {!isLoading && error === null && nodeSpecifications.length > 0 && (
           <Table
-            thClassName="!bg-inherit border-t-0 bg-mono-0 !px-3 !py-2 whitespace-nowrap"
-            trClassName="!bg-inherit cursor-pointer"
-            tdClassName="!bg-inherit !px-3 !py-2 whitespace-nowrap"
+            variant={TableVariant.DEFAULT}
             tableProps={table}
             totalRecords={nodeSpecifications.length}
           />
diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx
index e0f3464822..eb986b6de8 100644
--- a/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx
+++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx
@@ -1,14 +1,19 @@
 import { Spinner } from '@webb-tools/icons';
-import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components';
+import {
+  Card,
+  CardVariant,
+  SkeletonLoader,
+  Typography,
+} from '@webb-tools/webb-ui-components';
 
-import { GlassCard, TangleCard } from '../../../components';
+import { GlassCardWithLogo } from '../../../components';
 import ValueSkeleton from './ValueSkeleton';
 
 export default function Loading() {
   return (
     <div className="my-5 space-y-10">
       <div className="flex flex-col lg:flex-row gap-5 items-stretch">
-        <TangleCard className="min-h-[300px]">
+        <GlassCardWithLogo className="min-h-[300px]">
           <div className="w-full space-y-9">
             <div className="flex gap-2">
               <div className="w-9 h-9 rounded-full bg-mono-40 dark:bg-mono-160" />
@@ -33,21 +38,24 @@ export default function Loading() {
               </div>
             </div>
           </div>
-        </TangleCard>
-        <GlassCard>
+        </GlassCardWithLogo>
+
+        <Card variant={CardVariant.GLASS}>
           <Typography variant="h5" fw="bold">
             Role Distribution
           </Typography>
+
           <div className="min-h-[200px] flex items-center justify-center">
             <Spinner size="xl" />
           </div>
-        </GlassCard>
+        </Card>
       </div>
 
       <div className="space-y-4">
         <Typography variant="h5" fw="bold">
           Node Specifications
         </Typography>
+
         <SkeletonLoader className="h-[120px] rounded-2xl" />
       </div>
 
@@ -56,10 +64,12 @@ export default function Loading() {
           <Typography variant="h5" fw="bold">
             Active Services
           </Typography>
+
           <Typography variant="h5" fw="bold" className="!text-mono-100">
             Past Services
           </Typography>
         </div>
+
         <SkeletonLoader className="h-[228px] rounded-2xl" />
       </div>
     </div>
diff --git a/apps/tangle-dapp/app/nomination/page.tsx b/apps/tangle-dapp/app/nomination/page.tsx
index f8c274abbd..3b40b93dad 100644
--- a/apps/tangle-dapp/app/nomination/page.tsx
+++ b/apps/tangle-dapp/app/nomination/page.tsx
@@ -1,18 +1,6 @@
-import {
-  CoinsLineIcon,
-  EyeLineIcon,
-  Search,
-  SparklingIcon,
-} from '@webb-tools/icons';
-import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants';
-import {
-  TANGLE_DOCS_STAKING_URL,
-  Typography,
-} from '@webb-tools/webb-ui-components';
+import { Typography } from '@webb-tools/webb-ui-components';
 import { Metadata } from 'next';
 
-import OnboardingItem from '../../components/OnboardingModal/OnboardingItem';
-import OnboardingModal from '../../components/OnboardingModal/OnboardingModal';
 import { OpenGraphPageImageUrl } from '../../constants/openGraph';
 import {
   HeaderChipsContainer,
@@ -34,54 +22,22 @@ export const metadata: Metadata = createPageMetadata({
 
 export default async function NominationPage() {
   return (
-    <>
-      <OnboardingModal
-        title="Get Started Nominating Validators"
-        learnMoreHref={TANGLE_DOCS_STAKING_URL}
-        pageKey={OnboardingPageKey.NOMINATE}
-      >
-        <OnboardingItem
-          Icon={EyeLineIcon}
-          title="Staking Stats at a Glance"
-          description="View key stats like the ideal vs. actual staked assets, inflation, and active/nominated validators to get a quick overview of the network."
-        />
-
-        <OnboardingItem
-          Icon={Search}
-          title="Discover & Nominate Validators"
-          description="Explore active & waiting validators that help secure the network and choose those that align with your values to nominate them by delegating your TNT tokens."
-        />
-
-        <OnboardingItem
-          Icon={SparklingIcon}
-          title="Get Rewarded Without Running a Node"
-          description="Earn rewards for nominating validators at the end of each staking era—all without the complexity and costs of running a node yourself."
-        />
+    <div className="space-y-6 md:space-y-9 lg:space-y-12">
+      <div className="flex items-center justify-between">
+        <Typography variant="h4" fw="bold">
+          Overview
+        </Typography>
 
-        <OnboardingItem
-          Icon={CoinsLineIcon}
-          title="Request Payouts from Past Eras"
-          description="Claim your rewards by manually requesting payouts from your validators from past eras."
-        />
-      </OnboardingModal>
-
-      <div className="space-y-6 md:space-y-9 lg:space-y-12">
-        <div className="flex items-center justify-between">
-          <Typography variant="h4" fw="bold">
-            Overview
-          </Typography>
-
-          <HeaderChipsContainer />
-        </div>
+        <HeaderChipsContainer />
+      </div>
 
-        <KeyStatsContainer />
+      <KeyStatsContainer />
 
-        <NominatorStatsContainer />
+      <NominatorStatsContainer />
 
-        <NominationsPayoutsContainer />
+      <NominationsPayoutsContainer />
 
-        <ValidatorTablesContainer />
-      </div>
-    </>
+      <ValidatorTablesContainer />
+    </div>
   );
 }
diff --git a/apps/tangle-dapp/app/page.tsx b/apps/tangle-dapp/app/page.tsx
index 51b7fb3da5..d962b2e0b7 100644
--- a/apps/tangle-dapp/app/page.tsx
+++ b/apps/tangle-dapp/app/page.tsx
@@ -4,7 +4,6 @@ import { FC } from 'react';
 
 import AccountSummaryCard from '../components/account/AccountSummaryCard';
 import BalancesTableContainer from '../containers/BalancesTableContainer/BalancesTableContainer';
-import RecentTxContainer from '../containers/RecentTxContainer/RecentTxContainer';
 import createPageMetadata from '../utils/createPageMetadata';
 
 export const dynamic = 'force-static';
@@ -17,11 +16,7 @@ export const metadata: Metadata = createPageMetadata({
 const AccountPage: FC = () => {
   return (
     <div className="flex flex-col gap-5">
-      <div className="flex flex-col gap-6 xl:flex-row">
-        <AccountSummaryCard className="md:max-w-full xl:max-w-[556px]" />
-
-        <RecentTxContainer />
-      </div>
+      <AccountSummaryCard className="max-w-full md:max-w-full" />
 
       <Typography variant="h4" fw="bold">
         Balances
diff --git a/apps/tangle-dapp/app/restake/ActionButtonBase.tsx b/apps/tangle-dapp/app/restake/ActionButtonBase.tsx
index d54d30b630..5512f73c50 100644
--- a/apps/tangle-dapp/app/restake/ActionButtonBase.tsx
+++ b/apps/tangle-dapp/app/restake/ActionButtonBase.tsx
@@ -24,13 +24,12 @@ export default function ActionButtonBase({
     if (loading)
       return {
         isLoading: true,
-        loadingText: 'Loading...',
       };
 
     if (isConnecting)
       return {
         isLoading: true,
-        loadingText: 'Connecting...',
+        loadingText: 'Connecting',
       };
 
     return {
diff --git a/apps/tangle-dapp/app/restake/OperatorsTable.tsx b/apps/tangle-dapp/app/restake/OperatorsTable.tsx
index db6dfc4b53..bed4dd47a7 100644
--- a/apps/tangle-dapp/app/restake/OperatorsTable.tsx
+++ b/apps/tangle-dapp/app/restake/OperatorsTable.tsx
@@ -59,13 +59,14 @@ const OperatorsTable: FC<Props> = ({
       <Input
         id="search-validators"
         rightIcon={<Search className="mr-2" />}
-        placeholder="Search identity or address"
+        placeholder="Search by identity or address..."
         className="w-1/3 mb-1.5 ml-auto -mt-[54px]"
         isControlled
         debounceTime={500}
         value={globalFilter}
         onChange={setGlobalFilter}
       />
+
       <OperatorsTableUI
         globalFilter={globalFilter}
         onGlobalFilterChange={setGlobalFilter}
diff --git a/apps/tangle-dapp/app/restake/TabListItem.tsx b/apps/tangle-dapp/app/restake/TabListItem.tsx
index 6831eb51ef..a9b7238049 100644
--- a/apps/tangle-dapp/app/restake/TabListItem.tsx
+++ b/apps/tangle-dapp/app/restake/TabListItem.tsx
@@ -30,7 +30,7 @@ export default function TabListItem({
 
       <span
         className={twMerge(
-          'absolute body2 w-full p-2 text-center',
+          'absolute body1 w-full p-2 text-center',
           isActive && 'font-bold',
           isActive
             ? 'text-mono-200 dark:text-blue-50'
diff --git a/apps/tangle-dapp/app/restake/deposit/ActionButton.tsx b/apps/tangle-dapp/app/restake/deposit/ActionButton.tsx
index ac0e2a010a..06ee61305d 100644
--- a/apps/tangle-dapp/app/restake/deposit/ActionButton.tsx
+++ b/apps/tangle-dapp/app/restake/deposit/ActionButton.tsx
@@ -25,7 +25,6 @@ export default function ActionButton({
   watch,
 }: Props) {
   const sourceTypedChainId = watch('sourceTypedChainId');
-  const operatorAccountId = watch('operatorAccountId');
 
   const activeTypedChainId = useActiveTypedChainId();
   const switchChain = useSwitchChain();
@@ -79,9 +78,7 @@ export default function ActionButton({
             isDisabled={!isValid || displayError !== undefined}
             isFullWidth
           >
-            {(displayError ?? operatorAccountId)
-              ? 'Deposit + Delegate'
-              : 'Deposit'}
+            Deposit
           </Button>
         );
       }}
diff --git a/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx b/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx
index df728a4789..da62bd14cf 100644
--- a/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx
+++ b/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx
@@ -4,10 +4,10 @@ import { useWebContext } from '@webb-tools/api-provider-environment/webb-context
 import { ChainConfig } from '@webb-tools/dapp-config';
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import isDefined from '@webb-tools/dapp-types/utils/isDefined';
-import { ArrowRight } from '@webb-tools/icons/ArrowRight';
 import { calculateTypedChainId } from '@webb-tools/sdk-core';
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import { useRpcSubscription } from '@webb-tools/tangle-shared-ui/hooks/usePolkadotApi';
+import { Card } from '@webb-tools/webb-ui-components';
 import { type TokenListCardProps } from '@webb-tools/webb-ui-components/components/ListCard/types';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
 import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
@@ -27,10 +27,6 @@ import useRestakeTxEventHandlersWithNoti, {
 } from '../../..//data/restake/useRestakeTxEventHandlersWithNoti';
 import AvatarWithText from '../../../components/AvatarWithText';
 import { ChainList } from '../../../components/Lists/ChainList';
-import {
-  OperatorConfig,
-  OperatorList,
-} from '../../../components/Lists/OperatorList';
 import { SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS } from '../../../constants/restake';
 import { useRestakeContext } from '../../../context/RestakeContext';
 import {
@@ -47,7 +43,6 @@ import AssetList from '../AssetList';
 import Form from '../Form';
 import ModalContent from '../ModalContent';
 import ActionButton from './ActionButton';
-import DestChainInput from './DestChainInput';
 import SourceChainInput from './SourceChainInput';
 import TxDetails from './TxDetails';
 
@@ -163,12 +158,6 @@ const DepositForm = ({ ...props }: DepositFormProps) => {
     open: openChainModal,
   } = useModal();
 
-  const {
-    status: operatorModalOpen,
-    close: closeOperatorModal,
-    open: openOperatorModal,
-  } = useModal();
-
   const {
     status: tokenModalOpen,
     close: closeTokenModal,
@@ -250,22 +239,6 @@ const DepositForm = ({ ...props }: DepositFormProps) => {
     [closeTokenModal, setValue],
   );
 
-  const operators = useMemo(() => {
-    return Object.entries(operatorMap).map(([accountId, _operator]) => ({
-      accountId,
-      name: operatorIdentities?.[accountId]?.name || '<Unknown>',
-      status: 'active',
-    }));
-  }, [operatorMap, operatorIdentities]);
-
-  const handleOnSelectOperator = useCallback(
-    (operator: OperatorConfig) => {
-      setValue('operatorAccountId', operator.accountId);
-      closeOperatorModal();
-    },
-    [closeOperatorModal, setValue],
-  );
-
   const onSubmit = useCallback<SubmitHandler<DepositFormFields>>(
     async (data) => {
       const { amount, depositAssetId, operatorAccountId } = data;
@@ -306,85 +279,64 @@ const DepositForm = ({ ...props }: DepositFormProps) => {
   );
 
   return (
-    <Form {...props} ref={formRef} onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col h-full space-y-4 grow">
-        <div className="space-y-2">
-          <SourceChainInput
-            amountError={errors.amount?.message}
-            openChainModal={openChainModal}
-            openTokenModal={openTokenModal}
-            register={register}
-            setValue={setValue}
-            watch={watch}
-          />
-
-          <ArrowRight size="lg" className="mx-auto rotate-90" />
-
-          <DestChainInput
-            openOperatorModal={openOperatorModal}
-            watch={watch}
-            operatorIdentities={operatorIdentities}
-          />
+    <Card withShadow>
+      <Form {...props} ref={formRef} onSubmit={handleSubmit(onSubmit)}>
+        <div className="flex flex-col h-full space-y-4 grow">
+          <div className="space-y-2">
+            <SourceChainInput
+              amountError={errors.amount?.message}
+              openChainModal={openChainModal}
+              openTokenModal={openTokenModal}
+              register={register}
+              setValue={setValue}
+              watch={watch}
+            />
+          </div>
+
+          <div className="flex flex-col justify-between gap-4 grow">
+            <TxDetails watch={watch} />
+
+            <ActionButton
+              errors={errors}
+              formRef={formRef}
+              isSubmitting={isSubmitting}
+              isValid={isValid}
+              watch={watch}
+            />
+          </div>
         </div>
 
-        <div className="flex flex-col justify-between gap-4 grow">
-          <TxDetails watch={watch} />
-
-          <ActionButton
-            errors={errors}
-            formRef={formRef}
-            isSubmitting={isSubmitting}
-            isValid={isValid}
-            watch={watch}
-          />
-        </div>
-      </div>
-
-      <Modal>
-        <ModalContent
-          isOpen={chainModalOpen}
-          title="Select Chain"
-          description="Select the chain you want to deposit from."
-          onInteractOutside={closeChainModal}
-        >
-          <ChainList
-            searchInputId="restake-deposit-form-search"
-            onClose={closeChainModal}
-            chains={sourceChainOptions}
-            onSelectChain={handleOnSelectChain}
-            chainType="source"
-          />
-        </ModalContent>
-
-        <ModalContent
-          isOpen={tokenModalOpen}
-          title="Select Asset"
-          description="Select the asset you want to deposit."
-          onInteractOutside={closeTokenModal}
-        >
-          <AssetList
-            selectTokens={selectableTokens}
-            onChange={handleTokenChange}
-            onClose={closeTokenModal}
-          />
-        </ModalContent>
-
-        <ModalContent
-          isOpen={operatorModalOpen}
-          title="Select Operator"
-          description="Select the operator you want to delegate to"
-          onInteractOutside={closeOperatorModal}
-        >
-          <OperatorList
-            onClose={closeOperatorModal}
-            operatorMap={operatorMap}
-            operatorIdentities={operatorIdentities}
-            onSelectOperator={handleOnSelectOperator}
-            operators={operators}
-          />
-        </ModalContent>
-      </Modal>
-    </Form>
+        <Modal>
+          <ModalContent
+            isOpen={chainModalOpen}
+            title="Select Chain"
+            description="Select the chain you want to deposit from."
+            onInteractOutside={closeChainModal}
+          >
+            <ChainList
+              searchInputId="restake-deposit-form-search"
+              onClose={closeChainModal}
+              chains={sourceChainOptions}
+              onSelectChain={handleOnSelectChain}
+              chainType="source"
+            />
+          </ModalContent>
+
+          <ModalContent
+            isOpen={tokenModalOpen}
+            title="Select Asset"
+            description="Select the asset you want to deposit."
+            onInteractOutside={closeTokenModal}
+          >
+            <AssetList
+              selectTokens={selectableTokens}
+              onChange={handleTokenChange}
+              onClose={closeTokenModal}
+            />
+          </ModalContent>
+        </Modal>
+      </Form>
+    </Card>
   );
 };
 
diff --git a/apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx b/apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx
deleted file mode 100644
index 8938a63f96..0000000000
--- a/apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client';
-
-import isDefined from '@webb-tools/dapp-types/utils/isDefined';
-import type { IdentityType } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity';
-import { Avatar } from '@webb-tools/webb-ui-components/components/Avatar';
-import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard';
-import { useMemo } from 'react';
-import type { UseFormWatch } from 'react-hook-form';
-import { formatUnits } from 'viem';
-
-import AvatarWithText from '../../../components/AvatarWithText';
-import { useRestakeContext } from '../../../context/RestakeContext';
-import useRestakeDelegatorInfo from '../../../data/restake/useRestakeDelegatorInfo';
-import type { DepositFormFields } from '../../../types/restake';
-import SelectorPlaceholder from '../SelectorPlaceholder';
-
-type Props = {
-  openOperatorModal: () => void;
-  watch: UseFormWatch<DepositFormFields>;
-  operatorIdentities?: Record<string, IdentityType | null> | null;
-};
-
-const DestChainInput = ({
-  openOperatorModal,
-  watch,
-  operatorIdentities,
-}: Props) => {
-  const operatorAccountId = watch('operatorAccountId');
-  const selectedAssetId = watch('depositAssetId');
-
-  const { assetMap } = useRestakeContext();
-  const { delegatorInfo } = useRestakeDelegatorInfo();
-
-  const depositedBalance = useMemo(() => {
-    if (!isDefined(selectedAssetId)) return;
-
-    if (!isDefined(delegatorInfo)) return;
-
-    const amount = delegatorInfo.deposits[selectedAssetId]?.amount;
-    if (!isDefined(amount)) return;
-
-    const asset = assetMap[selectedAssetId];
-    if (!isDefined(asset)) return;
-
-    return +formatUnits(amount, asset.decimals);
-  }, [assetMap, delegatorInfo, selectedAssetId]);
-
-  return (
-    <TransactionInputCard.Root>
-      <TransactionInputCard.Header className="min-h-[55px]">
-        <TransactionInputCard.ChainSelector
-          placeholder={operatorAccountId ? 'Select Operator' : 'No Operator'}
-          disabled
-        />
-
-        <TransactionInputCard.MaxAmountButton
-          maxAmount={depositedBalance}
-          accountType="note"
-          tooltipBody="Deposited balance"
-          disabled
-        />
-      </TransactionInputCard.Header>
-
-      <TransactionInputCard.Body
-        hiddenAmountInput
-        tokenSelectorProps={{
-          onClick: openOperatorModal,
-          placeholder: (
-            <SelectorPlaceholder Icon={<Avatar value="" className="mr-2" />}>
-              Operator
-            </SelectorPlaceholder>
-          ),
-          children: operatorAccountId && (
-            <AvatarWithText
-              identityName={operatorIdentities?.[operatorAccountId]?.name}
-              accountAddress={operatorAccountId}
-              overrideTypographyProps={{ variant: 'h5' }}
-            />
-          ),
-        }}
-      />
-    </TransactionInputCard.Root>
-  );
-};
-
-export default DestChainInput;
diff --git a/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx b/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx
index 6c8b78b08c..2af82f2872 100644
--- a/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx
+++ b/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx
@@ -13,13 +13,13 @@ import type {
 } from 'react-hook-form';
 import { formatUnits } from 'viem';
 
+import ErrorMessage from '../../../components/ErrorMessage';
 import { useRestakeContext } from '../../../context/RestakeContext';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 import { DepositFormFields } from '../../../types/restake';
 import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import AssetPlaceholder from '../AssetPlaceholder';
-import ErrorMessage from '../ErrorMessage';
 
 type Props = {
   amountError?: string;
@@ -119,30 +119,32 @@ const SourceChainInput = ({
 
   return (
     // Pass token symbol to root here to share between max amount & token selection button
-    <TransactionInputCard.Root
-      tokenSymbol={asset?.symbol}
-      errorMessage={amountError}
-    >
-      <TransactionInputCard.Header>
-        <TransactionInputCard.ChainSelector
-          typedChainId={sourceTypedChainId}
-          onClick={handleChainSelectorClick}
+    <div className="flex flex-col items-start justify-stretch">
+      <TransactionInputCard.Root
+        tokenSymbol={asset?.symbol}
+        errorMessage={amountError}
+      >
+        <TransactionInputCard.Header>
+          <TransactionInputCard.ChainSelector
+            typedChainId={sourceTypedChainId}
+            onClick={handleChainSelectorClick}
+          />
+          <TransactionInputCard.MaxAmountButton
+            maxAmount={
+              typeof maxFormatted === 'string' ? +maxFormatted : undefined
+            }
+            onAmountChange={handleAmountChange}
+          />
+        </TransactionInputCard.Header>
+
+        <TransactionInputCard.Body
+          tokenSelectorProps={tokenSelectorProps}
+          customAmountProps={customAmountProps}
         />
-        <TransactionInputCard.MaxAmountButton
-          maxAmount={
-            typeof maxFormatted === 'string' ? +maxFormatted : undefined
-          }
-          onAmountChange={handleAmountChange}
-        />
-      </TransactionInputCard.Header>
-
-      <TransactionInputCard.Body
-        tokenSelectorProps={tokenSelectorProps}
-        customAmountProps={customAmountProps}
-      />
+      </TransactionInputCard.Root>
 
       <ErrorMessage>{amountError}</ErrorMessage>
-    </TransactionInputCard.Root>
+    </div>
   );
 };
 
diff --git a/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx b/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx
index 4b7bd767e7..6e2bb84730 100644
--- a/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx
+++ b/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx
@@ -1,13 +1,16 @@
 'use client';
 
-import FeeDetails from '@webb-tools/webb-ui-components/components/FeeDetails';
+import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components';
 import { useMemo } from 'react';
 import { UseFormWatch } from 'react-hook-form';
 
+import DetailsContainer from '../../../components/DetailsContainer';
+import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem';
 import { useRestakeContext } from '../../../context/RestakeContext';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 import useRestakeRewardConfig from '../../../data/restake/useRestakeRewardConfig';
 import { DepositFormFields } from '../../../types/restake';
+import pluralize from '../../../utils/pluralize';
 
 type Props = {
   watch: UseFormWatch<DepositFormFields>;
@@ -27,6 +30,7 @@ export default function TxDetails({ watch }: Props) {
     }
 
     const asset = assetMap[assetId];
+
     if (asset === undefined || asset.vaultId === null) {
       return null;
     }
@@ -35,23 +39,21 @@ export default function TxDetails({ watch }: Props) {
   }, [assetId, assetMap, rewardConfig.configs]);
 
   return (
-    <FeeDetails
-      isDisabledBgColor
-      disabled
-      isDefaultOpen
-      items={[
-        {
-          name: 'APY',
-          info: 'Restaking Rewards',
-          value: apy !== null ? `${apy}%` : apy,
-        },
-        {
-          name: 'Withdraw Period',
-          info: 'The duration for which the deposited asset is locked.',
-          value:
-            bondDuration !== null ? `${bondDuration} rounds` : bondDuration,
-        },
-      ]}
-    />
+    <DetailsContainer>
+      <DetailItem
+        title="APY"
+        value={apy !== null ? `${apy}%` : EMPTY_VALUE_PLACEHOLDER}
+      />
+
+      <DetailItem
+        title="Withdraw Period"
+        value={
+          bondDuration !== null
+            ? `${bondDuration} ${pluralize('session', bondDuration !== 1)}`
+            : EMPTY_VALUE_PLACEHOLDER
+        }
+        tooltip="The duration for which the deposited asset is locked."
+      />
+    </DetailsContainer>
   );
 }
diff --git a/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx b/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx
index 91e0dcba8b..6fa724c998 100644
--- a/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx
+++ b/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx
@@ -7,6 +7,7 @@ import type {
   OperatorMetadata,
 } from '@webb-tools/tangle-shared-ui/types/restake';
 import { getAccountInfo } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity';
+import { Card, CardVariant } from '@webb-tools/webb-ui-components';
 import { Chip } from '@webb-tools/webb-ui-components/components/Chip';
 import InfoIconWithTooltip from '@webb-tools/webb-ui-components/components/IconWithTooltip/InfoIconWithTooltip';
 import { KeyValueWithButton } from '@webb-tools/webb-ui-components/components/KeyValueWithButton';
@@ -19,12 +20,11 @@ import useSWRImmutable from 'swr/immutable';
 import { twMerge } from 'tailwind-merge';
 
 import AvatarWithText from '../../../../components/AvatarWithText';
-import GlassCard from '../../../../components/GlassCard/GlassCard';
 import ValidatorSocials from '../../../../components/ValidatorSocials';
 import type { DelegatorInfo } from '../../../../types/restake';
 import getTVLToDisplay from '../../../../utils/getTVLToDisplay';
 
-interface Props extends Partial<ComponentProps<typeof GlassCard>> {
+interface Props extends Partial<ComponentProps<typeof Card>> {
   operatorAddress: string;
   operatorData: OperatorMetadata | undefined;
   operatorMap: OperatorMap;
@@ -104,7 +104,11 @@ const OperatorInfoCard: FC<Props> = ({
   }, [operatorInfo?.email, operatorInfo?.twitter, operatorInfo?.web]);
 
   return (
-    <GlassCard {...props} className={twMerge('gap-10', className)}>
+    <Card
+      variant={CardVariant.GLASS}
+      {...props}
+      className={twMerge('gap-10', className)}
+    >
       <div className="flex items-start justify-between">
         <AvatarWithText
           overrideAvatarProps={{
@@ -138,7 +142,7 @@ const OperatorInfoCard: FC<Props> = ({
       </div>
 
       <ValidatorSocials {...validatorSocials} />
-    </GlassCard>
+    </Card>
   );
 };
 
diff --git a/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx b/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx
index ac4de6621d..80a92df65c 100644
--- a/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx
+++ b/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ExternalLinkLine, GithubFill } from '@webb-tools/icons';
+import { Card, CardVariant } from '@webb-tools/webb-ui-components';
 import { Avatar } from '@webb-tools/webb-ui-components/components/Avatar';
 import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
@@ -10,10 +11,9 @@ import Link from 'next/link';
 import type { ComponentProps, FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import GlassCard from '../../../../components/GlassCard/GlassCard';
 import { PagePath } from '../../../../types';
 
-interface Props extends Partial<ComponentProps<typeof GlassCard>> {
+interface Props extends Partial<ComponentProps<typeof Card>> {
   isLoading?: boolean;
   error?: string | null;
   blueprints:
@@ -47,7 +47,8 @@ const RegisteredBlueprintsCard: FC<Props> = ({
   const isEmpty = blueprints.length === 0;
 
   return (
-    <GlassCard
+    <Card
+      variant={CardVariant.GLASS}
       {...props}
       className={twMerge(bgClassName, bgDarkClassName, 'gap-3', className)}
     >
@@ -127,7 +128,7 @@ const RegisteredBlueprintsCard: FC<Props> = ({
           </ul>
         </ScrollArea>
       )}
-    </GlassCard>
+    </Card>
   );
 };
 
diff --git a/apps/tangle-dapp/app/restake/page.tsx b/apps/tangle-dapp/app/restake/page.tsx
index e5120e75ee..9849306f87 100644
--- a/apps/tangle-dapp/app/restake/page.tsx
+++ b/apps/tangle-dapp/app/restake/page.tsx
@@ -1,21 +1,15 @@
 'use client';
 
-import {
-  AddCircleLineIcon,
-  Search,
-  SparklingIcon,
-  UserLineIcon,
-} from '@webb-tools/icons';
-import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants';
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
-import { TANGLE_DOCS_RESTAKING_URL } from '@webb-tools/webb-ui-components';
+import {
+  Card,
+  CardVariant,
+  TANGLE_DOCS_RESTAKING_URL,
+} from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { twMerge } from 'tailwind-merge';
 
-import GlassCard from '../../components/GlassCard/GlassCard';
-import OnboardingItem from '../../components/OnboardingModal/OnboardingItem';
-import OnboardingModal from '../../components/OnboardingModal/OnboardingModal';
 import StatItem from '../../components/StatItem';
 import useRestakeDelegatorInfo from '../../data/restake/useRestakeDelegatorInfo';
 import useRestakeTVL from '../../data/restake/useRestakeTVL';
@@ -52,39 +46,10 @@ export default function RestakePage() {
 
   return (
     <>
-      <OnboardingModal
-        title="Get Started with Restaking"
-        pageKey={OnboardingPageKey.RESTAKE}
-        learnMoreHref={TANGLE_DOCS_RESTAKING_URL}
-      >
-        <OnboardingItem
-          Icon={Search}
-          title="Discover and Select Vaults"
-          description="Dive into our selection of vaults and assets. Sort by Total Value Locked (TVL) or Annual Percentage Yield (APY) to find the vault that best suits your needs—whether you're looking for reliability or high returns."
-        />
-
-        <OnboardingItem
-          Icon={AddCircleLineIcon}
-          title="Deposit Your Assets"
-          description="Once you've chosen your vault and asset, deposit your assets to begin the restaking process. You can even combine this step with delegation for a seamless experience."
-        />
-
-        <OnboardingItem
-          Icon={UserLineIcon}
-          title="Choose an Operator"
-          description="Select an operator to delegate your deposited assets. This step is crucial for securing service instances on Tangle."
-        />
-
-        <OnboardingItem
-          Icon={SparklingIcon}
-          title="Earn Rewards"
-          description="Enjoy earning rewards that are proportional to the performance of the services on Tangle. Maximize your earnings while supporting the network. Ready to start restaking?"
-        />
-      </OnboardingModal>
-
       <div className="space-y-5">
         <div className="flex flex-col gap-5 md:flex-row">
-          <GlassCard
+          <Card
+            variant={CardVariant.GLASS}
             className={twMerge(
               'justify-between',
               minHeightClsx,
@@ -110,9 +75,10 @@ export default function RestakePage() {
                 subtitle="Network TVL"
               />
             </div>
-          </GlassCard>
+          </Card>
 
-          <GlassCard
+          <Card
+            variant={CardVariant.GLASS}
             className={twMerge(
               minHeightClsx,
               'md:max-w-[442px] justify-between',
@@ -139,7 +105,7 @@ export default function RestakePage() {
             >
               Read more
             </Button>
-          </GlassCard>
+          </Card>
         </div>
 
         <TableTabs
diff --git a/apps/tangle-dapp/app/restake/stake/StakeInput.tsx b/apps/tangle-dapp/app/restake/stake/StakeInput.tsx
index 4c0e11c5e7..0ff9354a5d 100644
--- a/apps/tangle-dapp/app/restake/stake/StakeInput.tsx
+++ b/apps/tangle-dapp/app/restake/stake/StakeInput.tsx
@@ -13,6 +13,7 @@ import type {
 import { formatUnits } from 'viem';
 
 import AvatarWithText from '../../../components/AvatarWithText';
+import ErrorMessage from '../../../components/ErrorMessage';
 import { useRestakeContext } from '../../../context/RestakeContext';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 import type {
@@ -22,7 +23,6 @@ import type {
 import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import AssetPlaceholder from '../AssetPlaceholder';
-import ErrorMessage from '../ErrorMessage';
 
 type Props = {
   amountError: string | undefined;
diff --git a/apps/tangle-dapp/app/restake/stake/page.tsx b/apps/tangle-dapp/app/restake/stake/page.tsx
index 048b20b970..cf9d005790 100644
--- a/apps/tangle-dapp/app/restake/stake/page.tsx
+++ b/apps/tangle-dapp/app/restake/stake/page.tsx
@@ -5,6 +5,7 @@ import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import { calculateTypedChainId } from '@webb-tools/sdk-core';
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import { useRpcSubscription } from '@webb-tools/tangle-shared-ui/hooks/usePolkadotApi';
+import { Card } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import type { TokenListCardProps } from '@webb-tools/webb-ui-components/components/ListCard/types';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
@@ -252,68 +253,70 @@ export default function Page() {
   );
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col h-full space-y-4 grow">
-        <StakeInput
-          amountError={errors.amount?.message}
-          delegatorInfo={delegatorInfo}
-          openAssetModal={openAssetModal}
-          openOperatorModal={openOperatorModal}
-          register={register}
-          setValue={setValue}
-          watch={watch}
-        />
-
-        <div className="flex flex-col justify-between gap-4 grow">
-          <Info />
-
-          <ActionButton
-            errors={errors}
-            isValid={isValid}
-            openChainModal={openChainModal}
+    <Card withShadow>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <div className="flex flex-col h-full space-y-4 grow">
+          <StakeInput
+            amountError={errors.amount?.message}
+            delegatorInfo={delegatorInfo}
+            openAssetModal={openAssetModal}
+            openOperatorModal={openOperatorModal}
+            register={register}
+            setValue={setValue}
             watch={watch}
-            isSubmitting={isSubmitting}
           />
+
+          <div className="flex flex-col justify-between gap-4 grow">
+            <Info />
+
+            <ActionButton
+              errors={errors}
+              isValid={isValid}
+              openChainModal={openChainModal}
+              watch={watch}
+              isSubmitting={isSubmitting}
+            />
+          </div>
         </div>
-      </div>
-
-      <Modal>
-        <ModalContent
-          isOpen={isAssetModalOpen}
-          title="Select Asset"
-          description="Select the asset you want to delegate"
-          onInteractOutside={closeAssetModal}
-        >
-          <AssetList
-            selectTokens={selectableTokens}
-            onChange={handleAssetChange}
-            onClose={closeAssetModal}
-            renderEmpty={EmptyAsset}
-          />
-        </ModalContent>
-
-        <ModalContent
-          isOpen={isOperatorModalOpen}
-          title="Select Operator"
-          description="Select the operator you want to stake with"
-          onInteractOutside={closeOperatorModal}
-        >
-          <OperatorList
-            operators={operators}
-            operatorMap={operatorMap}
-            operatorIdentities={operatorIdentities}
-            onSelectOperator={handleOnSelectOperator}
-            onClose={closeOperatorModal}
+
+        <Modal>
+          <ModalContent
+            isOpen={isAssetModalOpen}
+            title="Select Asset"
+            description="Select the asset you want to delegate"
+            onInteractOutside={closeAssetModal}
+          >
+            <AssetList
+              selectTokens={selectableTokens}
+              onChange={handleAssetChange}
+              onClose={closeAssetModal}
+              renderEmpty={EmptyAsset}
+            />
+          </ModalContent>
+
+          <ModalContent
+            isOpen={isOperatorModalOpen}
+            title="Select Operator"
+            description="Select the operator you want to stake with"
+            onInteractOutside={closeOperatorModal}
+          >
+            <OperatorList
+              operators={operators}
+              operatorMap={operatorMap}
+              operatorIdentities={operatorIdentities}
+              onSelectOperator={handleOnSelectOperator}
+              onClose={closeOperatorModal}
+            />
+          </ModalContent>
+
+          <SupportedChainModal
+            isOpen={isChainModalOpen}
+            onClose={closeChainModal}
+            onChainChange={handleChainChange}
           />
-        </ModalContent>
-
-        <SupportedChainModal
-          isOpen={isChainModalOpen}
-          onClose={closeChainModal}
-          onChainChange={handleChainChange}
-        />
-      </Modal>
-    </Form>
+        </Modal>
+      </Form>
+    </Card>
   );
 }
 
diff --git a/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx b/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx
index 2e47356c9b..74d1488d94 100644
--- a/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx
+++ b/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx
@@ -1,30 +1,27 @@
-import FeeDetails from '@webb-tools/webb-ui-components/components/FeeDetails';
-import type { FeeItem } from '@webb-tools/webb-ui-components/components/FeeDetails/types';
-import { useMemo } from 'react';
+import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components';
 
+import DetailsContainer from '../../../components/DetailsContainer';
+import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 
 const TxInfo = () => {
   const { delegationBondLessDelay } = useRestakeConsts();
 
-  const items = useMemo<FeeItem[]>(
-    () => [
-      // TOOD: Add fee value
-      {
-        name: 'Fee',
-      },
-      {
-        name: 'Unstake Period',
-        value:
+  // TODO: Add fee value.
+  return (
+    <DetailsContainer>
+      <DetailItem title="Fee" value={EMPTY_VALUE_PLACEHOLDER} />
+
+      <DetailItem
+        title="Unstake Period"
+        value={
           typeof delegationBondLessDelay === 'number'
-            ? `${delegationBondLessDelay} rounds`
-            : null,
-      },
-    ],
-    [delegationBondLessDelay],
+            ? `${delegationBondLessDelay} sessions`
+            : EMPTY_VALUE_PLACEHOLDER
+        }
+      />
+    </DetailsContainer>
   );
-
-  return <FeeDetails isDisabledBgColor disabled isDefaultOpen items={items} />;
 };
 
 export default TxInfo;
diff --git a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx
index 0179e9e684..b295bbdc90 100644
--- a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx
+++ b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx
@@ -12,10 +12,11 @@ import {
 import { CheckboxCircleFill } from '@webb-tools/icons/CheckboxCircleFill';
 import { TimeFillIcon } from '@webb-tools/icons/TimeFillIcon';
 import type { IdentityType } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity';
+import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components';
 import { CheckBox } from '@webb-tools/webb-ui-components/components/CheckBox';
 import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils';
 import { Table } from '@webb-tools/webb-ui-components/components/Table';
-import cx from 'classnames';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { useMemo } from 'react';
 import { formatUnits } from 'viem';
 
@@ -74,7 +75,7 @@ const columns = [
               ready
             </span>
           ) : value < 0 ? (
-            'N/A'
+            EMPTY_VALUE_PLACEHOLDER
           ) : (
             <span className="flex items-center gap-1">
               <TimeFillIcon className="!fill-blue-50" />
@@ -166,12 +167,7 @@ const UnstakeRequestTable = ({
 
   return (
     <>
-      <Table
-        tableProps={table}
-        isPaginated
-        thClassName={cx('!border-t-transparent !bg-transparent px-3 py-2')}
-        tdClassName={cx('!border-transparent !bg-transparent px-3 py-2')}
-      />
+      <Table variant={TableVariant.DEFAULT} tableProps={table} isPaginated />
 
       <div className="flex items-center gap-3">
         <UnstakeRequestTableActions
diff --git a/apps/tangle-dapp/app/restake/unstake/page.tsx b/apps/tangle-dapp/app/restake/unstake/page.tsx
index 3d333efe17..042cdcd4d2 100644
--- a/apps/tangle-dapp/app/restake/unstake/page.tsx
+++ b/apps/tangle-dapp/app/restake/unstake/page.tsx
@@ -5,6 +5,7 @@ import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import LockFillIcon from '@webb-tools/icons/LockFillIcon';
 import { LockLineIcon } from '@webb-tools/icons/LockLineIcon';
 import { calculateTypedChainId } from '@webb-tools/sdk-core';
+import { Card } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
 import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/components/TextField/types';
@@ -16,6 +17,7 @@ import { type SubmitHandler, useForm } from 'react-hook-form';
 import { formatUnits, parseUnits } from 'viem';
 
 import AvatarWithText from '../../../components/AvatarWithText';
+import ErrorMessage from '../../../components/ErrorMessage';
 import RestakeDetailCard from '../../../components/RestakeDetailCard';
 import { SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS } from '../../../constants/restake';
 import { useRestakeContext } from '../../../context/RestakeContext';
@@ -35,7 +37,6 @@ import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import ActionButtonBase from '../ActionButtonBase';
 import AssetPlaceholder from '../AssetPlaceholder';
-import ErrorMessage from '../ErrorMessage';
 import RestakeTabs from '../RestakeTabs';
 import SupportedChainModal from '../SupportedChainModal';
 import useSwitchChain from '../useSwitchChain';
@@ -229,92 +230,94 @@ const Page = () => {
       <div className="max-w-lg">
         <RestakeTabs />
 
-        <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
-          <TransactionInputCard.Root tokenSymbol={selectedAsset?.symbol}>
-            <TransactionInputCard.Header>
-              <TransactionInputCard.ChainSelector
-                placeholder="Select"
-                onClick={openOperatorModal}
-                {...(selectedOperatorAccountId
-                  ? {
-                      renderBody: () => (
-                        <AvatarWithText
-                          accountAddress={selectedOperatorAccountId}
-                          identityName={
-                            operatorIdentities?.[selectedOperatorAccountId]
-                              ?.name
-                          }
-                          overrideTypographyProps={{ variant: 'h5' }}
-                        />
-                      ),
-                    }
-                  : {})}
-              />
-              <TransactionInputCard.MaxAmountButton
-                maxAmount={formattedMaxAmount}
-                tooltipBody="Staked Balance"
-                Icon={
+        <Card withShadow>
+          <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
+            <TransactionInputCard.Root tokenSymbol={selectedAsset?.symbol}>
+              <TransactionInputCard.Header>
+                <TransactionInputCard.ChainSelector
+                  placeholder="Select"
+                  onClick={openOperatorModal}
+                  {...(selectedOperatorAccountId
+                    ? {
+                        renderBody: () => (
+                          <AvatarWithText
+                            accountAddress={selectedOperatorAccountId}
+                            identityName={
+                              operatorIdentities?.[selectedOperatorAccountId]
+                                ?.name
+                            }
+                            overrideTypographyProps={{ variant: 'h5' }}
+                          />
+                        ),
+                      }
+                    : {})}
+                />
+                <TransactionInputCard.MaxAmountButton
+                  maxAmount={formattedMaxAmount}
+                  tooltipBody="Staked Balance"
+                  Icon={
+                    useRef({
+                      enabled: <LockLineIcon />,
+                      disabled: <LockFillIcon />,
+                    }).current
+                  }
+                />
+              </TransactionInputCard.Header>
+
+              <TransactionInputCard.Body
+                customAmountProps={customAmountProps}
+                tokenSelectorProps={
                   useRef({
-                    enabled: <LockLineIcon />,
-                    disabled: <LockFillIcon />,
+                    placeholder: <AssetPlaceholder />,
+                    isDisabled: true,
                   }).current
                 }
               />
-            </TransactionInputCard.Header>
-
-            <TransactionInputCard.Body
-              customAmountProps={customAmountProps}
-              tokenSelectorProps={
-                useRef({
-                  placeholder: <AssetPlaceholder />,
-                  isDisabled: true,
-                }).current
-              }
-            />
-
-            <ErrorMessage>{errors.amount?.message}</ErrorMessage>
-          </TransactionInputCard.Root>
-
-          <TxInfo />
-
-          <ActionButtonBase>
-            {(isLoading, loadingText) => {
-              const activeChainSupported =
-                isDefined(activeTypedChainId) &&
-                SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS.includes(
-                  activeTypedChainId,
-                );
 
-              if (!activeChainSupported) {
+              <ErrorMessage>{errors.amount?.message}</ErrorMessage>
+            </TransactionInputCard.Root>
+
+            <TxInfo />
+
+            <ActionButtonBase>
+              {(isLoading, loadingText) => {
+                const activeChainSupported =
+                  isDefined(activeTypedChainId) &&
+                  SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS.includes(
+                    activeTypedChainId,
+                  );
+
+                if (!activeChainSupported) {
+                  return (
+                    <Button
+                      isFullWidth
+                      type="button"
+                      isLoading={isLoading}
+                      loadingText={loadingText}
+                      onClick={openChainModal}
+                    >
+                      Switch to supported chain
+                    </Button>
+                  );
+                }
+
                 return (
                   <Button
+                    isDisabled={!isValid || isDefined(displayError)}
+                    type="submit"
                     isFullWidth
-                    type="button"
-                    isLoading={isLoading}
-                    loadingText={loadingText}
-                    onClick={openChainModal}
+                    isLoading={isSubmitting || isLoading}
+                    loadingText={
+                      isSubmitting ? 'Sending transaction...' : loadingText
+                    }
                   >
-                    Switch to supported chain
+                    {displayError ?? 'Schedule Unstake'}
                   </Button>
                 );
-              }
-
-              return (
-                <Button
-                  isDisabled={!isValid || isDefined(displayError)}
-                  type="submit"
-                  isFullWidth
-                  isLoading={isSubmitting || isLoading}
-                  loadingText={
-                    isSubmitting ? 'Sending transaction...' : loadingText
-                  }
-                >
-                  {displayError ?? 'Schedule Unstake'}
-                </Button>
-              );
-            }}
-          </ActionButtonBase>
-        </form>
+              }}
+            </ActionButtonBase>
+          </form>
+        </Card>
       </div>
 
       {/** Hardcoded for the margin top to ensure the component is align to same card content */}
@@ -326,7 +329,7 @@ const Page = () => {
           />
         ) : (
           <>
-            <RestakeDetailCard.Header title="No unstake requests found" />
+            <RestakeDetailCard.Header title="No Unstake Requests" />
 
             <Typography
               variant="body2"
@@ -334,7 +337,7 @@ const Page = () => {
             >
               You will be able to withdraw your tokens after the unstake request
               has been processed. To unstake your tokens go to the unstake tab
-              to schedule request.
+              to schedule a request.
             </Typography>
           </>
         )}
diff --git a/apps/tangle-dapp/app/restake/withdraw/WithdrawRequestTable.tsx b/apps/tangle-dapp/app/restake/withdraw/WithdrawRequestTable.tsx
index ed716d20f8..adaa8bee22 100644
--- a/apps/tangle-dapp/app/restake/withdraw/WithdrawRequestTable.tsx
+++ b/apps/tangle-dapp/app/restake/withdraw/WithdrawRequestTable.tsx
@@ -14,8 +14,8 @@ import { TimeFillIcon } from '@webb-tools/icons/TimeFillIcon';
 import { CheckBox } from '@webb-tools/webb-ui-components/components/CheckBox';
 import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils';
 import { Table } from '@webb-tools/webb-ui-components/components/Table';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import cx from 'classnames';
 import { useMemo } from 'react';
 import { formatUnits } from 'viem';
 
@@ -156,12 +156,7 @@ const WithdrawRequestTable = ({ withdrawRequests }: Props) => {
 
   return (
     <>
-      <Table
-        tableProps={table}
-        isPaginated
-        thClassName={cx('!border-t-transparent !bg-transparent px-3 py-2')}
-        tdClassName={cx('!border-transparent !bg-transparent px-3 py-2')}
-      />
+      <Table variant={TableVariant.DEFAULT} tableProps={table} isPaginated />
 
       <div className="flex items-center gap-3">
         <WithdrawRequestTableActions
diff --git a/apps/tangle-dapp/app/restake/withdraw/page.tsx b/apps/tangle-dapp/app/restake/withdraw/page.tsx
index 6a89e16af2..bee1a8e3ef 100644
--- a/apps/tangle-dapp/app/restake/withdraw/page.tsx
+++ b/apps/tangle-dapp/app/restake/withdraw/page.tsx
@@ -7,6 +7,7 @@ import { ChainIcon } from '@webb-tools/icons/ChainIcon';
 import LockFillIcon from '@webb-tools/icons/LockFillIcon';
 import { LockLineIcon } from '@webb-tools/icons/LockLineIcon';
 import { calculateTypedChainId } from '@webb-tools/sdk-core';
+import { Card } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
 import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/components/TextField/types';
@@ -17,6 +18,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { type SubmitHandler, useForm } from 'react-hook-form';
 import { formatUnits, parseUnits } from 'viem';
 
+import ErrorMessage from '../../../components/ErrorMessage';
 import RestakeDetailCard from '../../../components/RestakeDetailCard';
 import { SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS } from '../../../constants/restake';
 import { useRestakeContext } from '../../../context/RestakeContext';
@@ -35,7 +37,6 @@ import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import ActionButtonBase from '../ActionButtonBase';
 import AssetPlaceholder from '../AssetPlaceholder';
-import ErrorMessage from '../ErrorMessage';
 import RestakeTabs from '../RestakeTabs';
 import SupportedChainModal from '../SupportedChainModal';
 import useSwitchChain from '../useSwitchChain';
@@ -201,95 +202,97 @@ const Page = () => {
       <div className="max-w-lg">
         <RestakeTabs />
 
-        <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
-          <TransactionInputCard.Root tokenSymbol={selectedAsset?.symbol}>
-            <TransactionInputCard.Header>
-              <TransactionInputCard.ChainSelector
-                placeholder="Active Chain"
-                disabled
-                {...(activeChain
-                  ? {
-                      renderBody: () => (
-                        <div className="flex items-center gap-2">
-                          <ChainIcon size="lg" name={activeChain.name} />
-
-                          <Typography
-                            variant="h5"
-                            fw="bold"
-                            className="text-mono-200 dark:text-mono-0"
-                          >
-                            {activeChain.name}
-                          </Typography>
-                        </div>
-                      ),
-                    }
-                  : {})}
-              />
-              <TransactionInputCard.MaxAmountButton
-                maxAmount={formattedMaxAmount}
-                tooltipBody="Deposited Balance"
-                Icon={
+        <Card withShadow>
+          <form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
+            <TransactionInputCard.Root tokenSymbol={selectedAsset?.symbol}>
+              <TransactionInputCard.Header>
+                <TransactionInputCard.ChainSelector
+                  placeholder="Active Chain"
+                  disabled
+                  {...(activeChain
+                    ? {
+                        renderBody: () => (
+                          <div className="flex items-center gap-2">
+                            <ChainIcon size="lg" name={activeChain.name} />
+
+                            <Typography
+                              variant="h5"
+                              fw="bold"
+                              className="text-mono-200 dark:text-mono-0"
+                            >
+                              {activeChain.name}
+                            </Typography>
+                          </div>
+                        ),
+                      }
+                    : {})}
+                />
+                <TransactionInputCard.MaxAmountButton
+                  maxAmount={formattedMaxAmount}
+                  tooltipBody="Deposited Balance"
+                  Icon={
+                    useRef({
+                      enabled: <LockLineIcon />,
+                      disabled: <LockFillIcon />,
+                    }).current
+                  }
+                />
+              </TransactionInputCard.Header>
+
+              <TransactionInputCard.Body
+                customAmountProps={customAmountProps}
+                tokenSelectorProps={
                   useRef({
-                    enabled: <LockLineIcon />,
-                    disabled: <LockFillIcon />,
+                    placeholder: <AssetPlaceholder />,
+                    onClick: openWithdrawModal,
                   }).current
                 }
               />
-            </TransactionInputCard.Header>
-
-            <TransactionInputCard.Body
-              customAmountProps={customAmountProps}
-              tokenSelectorProps={
-                useRef({
-                  placeholder: <AssetPlaceholder />,
-                  onClick: openWithdrawModal,
-                }).current
-              }
-            />
-
-            <ErrorMessage>{errors.amount?.message}</ErrorMessage>
-          </TransactionInputCard.Root>
-
-          <TxInfo />
-
-          <ActionButtonBase>
-            {(isLoading, loadingText) => {
-              const activeChainSupported =
-                isDefined(activeTypedChainId) &&
-                SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS.includes(
-                  activeTypedChainId,
-                );
 
-              if (!activeChainSupported) {
+              <ErrorMessage>{errors.amount?.message}</ErrorMessage>
+            </TransactionInputCard.Root>
+
+            <TxInfo />
+
+            <ActionButtonBase>
+              {(isLoading, loadingText) => {
+                const activeChainSupported =
+                  isDefined(activeTypedChainId) &&
+                  SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS.includes(
+                    activeTypedChainId,
+                  );
+
+                if (!activeChainSupported) {
+                  return (
+                    <Button
+                      isFullWidth
+                      type="button"
+                      isLoading={isLoading}
+                      loadingText={loadingText}
+                      onClick={openChainModal}
+                    >
+                      Switch to supported chain
+                    </Button>
+                  );
+                }
+
                 return (
                   <Button
+                    isDisabled={!isValid || isDefined(displayError)}
+                    type="submit"
                     isFullWidth
-                    type="button"
-                    isLoading={isLoading}
-                    loadingText={loadingText}
-                    onClick={openChainModal}
+                    isLoading={isSubmitting || isLoading}
+                    loadingText={
+                      isSubmitting ? 'Sending transaction...' : loadingText
+                    }
                   >
-                    Switch to supported chain
+                    {displayError ?? 'Schedule Withdraw'}
                   </Button>
                 );
-              }
-
-              return (
-                <Button
-                  isDisabled={!isValid || isDefined(displayError)}
-                  type="submit"
-                  isFullWidth
-                  isLoading={isSubmitting || isLoading}
-                  loadingText={
-                    isSubmitting ? 'Sending transaction...' : loadingText
-                  }
-                >
-                  {displayError ?? 'Schedule Withdraw'}
-                </Button>
-              );
-            }}
-          </ActionButtonBase>
-        </form>
+              }}
+            </ActionButtonBase>
+          </form>
+        </Card>
       </div>
 
       {/** Hardcoded for the margin top to ensure the component is align to same card content */}
diff --git a/apps/tangle-dapp/components/AmountInput.tsx b/apps/tangle-dapp/components/AmountInput.tsx
index 3d27effc16..b8bbe65c32 100644
--- a/apps/tangle-dapp/components/AmountInput.tsx
+++ b/apps/tangle-dapp/components/AmountInput.tsx
@@ -26,7 +26,6 @@ export type AmountInputProps = {
   wrapperClassName?: string;
   bodyClassName?: string;
   dropdownBodyClassName?: string;
-  errorMessageClassName?: string;
 };
 
 const AmountInput: FC<AmountInputProps> = ({
@@ -49,7 +48,6 @@ const AmountInput: FC<AmountInputProps> = ({
   wrapperClassName,
   bodyClassName,
   dropdownBodyClassName,
-  errorMessageClassName,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const { nativeTokenSymbol } = useNetworkStore();
@@ -113,7 +111,6 @@ const AmountInput: FC<AmountInputProps> = ({
       wrapperClassName={wrapperClassName}
       bodyClassName={bodyClassName}
       dropdownBodyClassName={dropdownBodyClassName}
-      errorMessageClassName={errorMessageClassName}
     >
       <Input
         id={id}
diff --git a/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx b/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx
deleted file mode 100644
index 1b858c625a..0000000000
--- a/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client';
-
-import { IconBase } from '@webb-tools/icons/types';
-import {
-  Breadcrumbs as BreadcrumbsCmp,
-  BreadcrumbsItem,
-} from '@webb-tools/webb-ui-components';
-import cx from 'classnames';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { FC, ReactElement, useMemo } from 'react';
-
-import { getBreadcrumbIcon, getBreadcrumbLabel } from './utils';
-
-export type BreadcrumbType = {
-  label: string;
-  isLast: boolean;
-  icon?: ReactElement<IconBase>;
-  href: string;
-  className?: string;
-};
-
-const Breadcrumbs: FC<{ className?: string }> = ({ className }) => {
-  const fullPathname = usePathname();
-
-  const pathNames = fullPathname
-    .split('/')
-    .filter((segment) => segment.trim() !== '');
-
-  const breadCrumbs = useMemo<BreadcrumbType[]>(() => {
-    return pathNames.map((pathName, index) => {
-      const Icon = getBreadcrumbIcon(pathName, index, pathNames);
-      const label = getBreadcrumbLabel(pathName, index, pathNames);
-
-      return {
-        label,
-        isLast: index === pathNames.length - 1,
-        href: `/${pathNames.slice(0, index + 1).join('/')}`,
-        icon:
-          Icon !== null ? (
-            <Icon className="w-4 h-4 lg:w-6 lg:h-6" />
-          ) : undefined,
-      };
-    });
-  }, [pathNames]);
-
-  return (
-    <div className={className}>
-      <BreadcrumbsCmp>
-        {breadCrumbs.map((breadcrumb, index) => (
-          /**
-           * Data on the client-side needs to be up-to-date when the user navigates to a page
-           * Therefore, do not need to prefetch routes in breadcrumb items
-           */
-          <Link key={index} href={breadcrumb.href} prefetch={false}>
-            <BreadcrumbsItem
-              icon={breadcrumb.icon}
-              className={cx('whitespace-nowrap', breadcrumb.className)}
-              textClassName="!text-[12px] lg:!text-[16px] normal-case"
-              isLast={breadcrumb.isLast}
-            >
-              {breadcrumb.label}
-            </BreadcrumbsItem>
-          </Link>
-        ))}
-      </BreadcrumbsCmp>
-    </div>
-  );
-};
-
-export default Breadcrumbs;
diff --git a/apps/tangle-dapp/components/Breadcrumbs/index.ts b/apps/tangle-dapp/components/Breadcrumbs/index.ts
deleted file mode 100644
index 0835ba0b68..0000000000
--- a/apps/tangle-dapp/components/Breadcrumbs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Breadcrumbs } from './Breadcrumbs';
diff --git a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx b/apps/tangle-dapp/components/Breadcrumbs/utils.tsx
deleted file mode 100644
index 9d6ba64b7c..0000000000
--- a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  CodeFill,
-  CoinLine,
-  GiftLineIcon,
-  GridFillIcon,
-  ShuffleLine,
-  TokenSwapFill,
-  WaterDropletIcon,
-} from '@webb-tools/icons';
-import { UserFillIcon } from '@webb-tools/icons';
-import { IconBase } from '@webb-tools/icons/types';
-import { shortenString } from '@webb-tools/webb-ui-components';
-import assert from 'assert';
-import capitalize from 'lodash/capitalize';
-import { JSX } from 'react';
-
-import { PagePath } from '../../types';
-import isSubstrateAddress from '../../utils/isSubstrateAddress';
-
-const BREADCRUMB_ICONS: Record<PagePath, (props: IconBase) => JSX.Element> = {
-  [PagePath.CLAIM_AIRDROP]: GiftLineIcon,
-  [PagePath.ACCOUNT]: UserFillIcon,
-  [PagePath.NOMINATION]: CoinLine,
-  [PagePath.BLUEPRINTS]: GridFillIcon,
-  [PagePath.SERVICES]: GridFillIcon,
-  [PagePath.RESTAKE]: TokenSwapFill,
-  [PagePath.RESTAKE_DEPOSIT]: TokenSwapFill,
-  [PagePath.RESTAKE_STAKE]: TokenSwapFill,
-  [PagePath.RESTAKE_OPERATOR]: TokenSwapFill,
-  [PagePath.BRIDGE]: ShuffleLine,
-  [PagePath.LIQUID_STAKING]: WaterDropletIcon,
-};
-
-const BREADCRUMB_LABELS: Partial<Record<PagePath, string>> = {
-  [PagePath.SERVICES]: 'Service Overview',
-  [PagePath.CLAIM_AIRDROP]: 'Claim Airdrop',
-  [PagePath.LIQUID_STAKING]: 'Liquid Staking',
-};
-
-const isPagePath = (pathName: string): pathName is PagePath => {
-  return Object.values(PagePath).includes(pathName as PagePath);
-};
-
-const isSubPath = (
-  page: PagePath,
-  expectedIndex: number,
-  expectedLength: number,
-  actualIndex: number,
-  pathNames: string[],
-): boolean => {
-  assert(
-    expectedIndex < expectedLength && actualIndex < pathNames.length,
-    'Index should be in bounds',
-  );
-
-  if (pathNames.length === 0) {
-    return false;
-  }
-
-  const pagePath = '/' + pathNames[0];
-
-  return (
-    pagePath === page &&
-    actualIndex === expectedIndex &&
-    pathNames.length === expectedLength
-  );
-};
-
-export const getBreadcrumbLabel = (
-  pathName: string,
-  index: number,
-  pathNames: string[],
-): string => {
-  // Special case for the Service Details page.
-  if (
-    pathNames.length === 2 &&
-    index === 1 &&
-    pathNames[0] === PagePath.SERVICES.substring(1)
-  ) {
-    return `Details: ${pathName}`;
-  }
-
-  const pathNameWithSlash = '/' + pathName;
-
-  const knownLabel = isPagePath(pathNameWithSlash)
-    ? BREADCRUMB_LABELS[pathNameWithSlash]
-    : undefined;
-
-  if (knownLabel !== undefined) {
-    return knownLabel;
-  }
-
-  // In the case that the pathname is a Substrate address, shorten it
-  // to a more readable format, and to prevent overflow.
-  if (isSubstrateAddress(pathName)) {
-    return shortenString(pathName);
-  }
-
-  // decode special character encoding  (Ex: "%20" -> " ")
-  return capitalize(decodeURI(pathName));
-};
-
-export const getBreadcrumbIcon = (
-  pathName: string,
-  index: number,
-  pathNames: string[],
-): ((props: IconBase) => JSX.Element) | null => {
-  // Special case for the Service Details page.
-  if (isSubPath(PagePath.SERVICES, 1, 2, index, pathNames)) {
-    return CodeFill;
-  }
-
-  const pathNameWithSlash = '/' + pathName;
-
-  const knownIcon = isPagePath(pathNameWithSlash)
-    ? BREADCRUMB_ICONS[pathNameWithSlash]
-    : undefined;
-
-  return knownIcon ?? null;
-};
diff --git a/apps/tangle-dapp/components/DetailsContainer.tsx b/apps/tangle-dapp/components/DetailsContainer.tsx
new file mode 100644
index 0000000000..586a6ff63c
--- /dev/null
+++ b/apps/tangle-dapp/components/DetailsContainer.tsx
@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+
+const DetailsContainer: FC<PropsWithChildren> = ({ children }) => {
+  return <div className="flex flex-col gap-2 p-3">{children}</div>;
+};
+
+export default DetailsContainer;
diff --git a/apps/tangle-dapp/app/restake/ErrorMessage.tsx b/apps/tangle-dapp/components/ErrorMessage.tsx
similarity index 87%
rename from apps/tangle-dapp/app/restake/ErrorMessage.tsx
rename to apps/tangle-dapp/components/ErrorMessage.tsx
index b6df8b66af..86442ef66f 100644
--- a/apps/tangle-dapp/app/restake/ErrorMessage.tsx
+++ b/apps/tangle-dapp/components/ErrorMessage.tsx
@@ -23,12 +23,12 @@ export default function ErrorMessage({
     <p
       {...props}
       className={twMerge(
-        'flex items-center gap-1 text-red-70 dark:text-red-50 h-4 mt-2',
+        'flex items-center gap-1 text-red-70 dark:text-red-50 mt-2',
         className,
       )}
     >
       {isDefined(children) ? (
-        <InformationLine size="md" className="!fill-current" />
+        <InformationLine size="md" className="fill-current dark:fill-current" />
       ) : null}
 
       <Typography
diff --git a/apps/tangle-dapp/components/GlassCard/GlassCard.tsx b/apps/tangle-dapp/components/GlassCard/GlassCard.tsx
deleted file mode 100644
index 3447bbb95c..0000000000
--- a/apps/tangle-dapp/components/GlassCard/GlassCard.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Card } from '@webb-tools/webb-ui-components/components/Card';
-import { ElementRef, forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import { GlassCardProps } from './types';
-
-const GlassCard = forwardRef<ElementRef<'div'>, GlassCardProps>(
-  (
-    {
-      children,
-      className,
-      bgClassName = 'bg-glass dark:bg-glass_dark',
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Card
-        {...props}
-        ref={ref}
-        className={twMerge(
-          'p-6 space-y-0 rounded-2xl border border-mono-0 dark:border-mono-160',
-          bgClassName,
-          className,
-        )}
-      >
-        {children}
-      </Card>
-    );
-  },
-);
-
-GlassCard.displayName = 'GlassCard';
-
-export default GlassCard;
diff --git a/apps/tangle-dapp/components/GlassCard/index.ts b/apps/tangle-dapp/components/GlassCard/index.ts
deleted file mode 100644
index 6a14fedf44..0000000000
--- a/apps/tangle-dapp/components/GlassCard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { default as GlassCard } from './GlassCard';
-
-export default GlassCard;
diff --git a/apps/tangle-dapp/components/GlassCard/types.ts b/apps/tangle-dapp/components/GlassCard/types.ts
deleted file mode 100644
index 04328690c9..0000000000
--- a/apps/tangle-dapp/components/GlassCard/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ComponentProps } from 'react';
-
-export type GlassCardProps = ComponentProps<'div'> & {
-  bgClassName?: string;
-};
diff --git a/apps/tangle-dapp/components/GlassCardWithLogo.tsx b/apps/tangle-dapp/components/GlassCardWithLogo.tsx
new file mode 100644
index 0000000000..dd688e31c5
--- /dev/null
+++ b/apps/tangle-dapp/components/GlassCardWithLogo.tsx
@@ -0,0 +1,26 @@
+import { Card, CardVariant } from '@webb-tools/webb-ui-components';
+import { FC, PropsWithChildren } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import TangleBigLogo from './TangleBigLogo';
+
+const GlassCardWithLogo: FC<PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => {
+  return (
+    <Card
+      variant={CardVariant.GLASS}
+      className={twMerge(
+        'relative w-full flex items-center md:max-w-[556px] overflow-hidden shadow-sm',
+        className,
+      )}
+    >
+      {children}
+
+      <TangleBigLogo className="absolute top-1/2 -translate-y-1/2 right-0 rounded-br-2xl" />
+    </Card>
+  );
+};
+
+export default GlassCardWithLogo;
diff --git a/apps/tangle-dapp/components/HeaderChip/ChipText.tsx b/apps/tangle-dapp/components/HeaderChip/ChipText.tsx
index 6c0b55cbcd..462b57415f 100644
--- a/apps/tangle-dapp/components/HeaderChip/ChipText.tsx
+++ b/apps/tangle-dapp/components/HeaderChip/ChipText.tsx
@@ -16,11 +16,11 @@ const ChipText = ({ label }: Props) => {
     <Typography
       variant="body2"
       fw="bold"
-      className="text-current dark:text-current"
+      className="text-current dark:text-current flex gap-1 items-center justify-center"
     >
       {label}:{' '}
       {isLoading ? (
-        <SkeletonLoader className="w-[40px]" />
+        <SkeletonLoader as="span" className="w-[40px]" />
       ) : error ? (
         'Error'
       ) : data === null ? null : (
diff --git a/apps/tangle-dapp/components/InputWrapper.tsx b/apps/tangle-dapp/components/InputWrapper.tsx
index 9963eb6419..6bb5b8958c 100644
--- a/apps/tangle-dapp/components/InputWrapper.tsx
+++ b/apps/tangle-dapp/components/InputWrapper.tsx
@@ -4,7 +4,6 @@ import {
   ChipColors,
   InfoIconWithTooltip,
   Label,
-  Typography,
 } from '@webb-tools/webb-ui-components';
 import {
   Dispatch,
@@ -18,6 +17,7 @@ import { twMerge } from 'tailwind-merge';
 
 import InputAction from '../containers/ManageProfileModalContainer/InputAction';
 import { useErrorCountContext } from '../context/ErrorsContext';
+import ErrorMessage from './ErrorMessage';
 
 export type InputWrapperProps = {
   title: string;
@@ -34,7 +34,6 @@ export type InputWrapperProps = {
   wrapperClassName?: string;
   bodyClassName?: string;
   dropdownBodyClassName?: string;
-  errorMessageClassName?: string;
   isFullWidth?: boolean;
   isDisabled?: boolean;
   tooltip?: ReactNode;
@@ -55,7 +54,6 @@ const InputWrapper: FC<InputWrapperProps> = ({
   wrapperClassName,
   bodyClassName,
   dropdownBodyClassName,
-  errorMessageClassName,
   isFullWidth = false,
   isDisabled = false,
   tooltip,
@@ -83,7 +81,7 @@ const InputWrapper: FC<InputWrapperProps> = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col gap-1 w-full max-w-[356px]',
+        'flex flex-col w-full max-w-[356px]',
         isFullWidth && 'max-w-full',
       )}
     >
@@ -94,7 +92,7 @@ const InputWrapper: FC<InputWrapperProps> = ({
           'flex items-center justify-between gap-2',
           'w-[356px] max-w-[356px]',
           'bg-mono-20 dark:bg-mono-170',
-          'border border-mono-40 dark:border-mono-170',
+          'border border-transparent',
           hasError && 'border-red-70 dark:border-red-50',
           isFullWidth && 'w-full max-w-full',
           wrapperClassName,
@@ -161,17 +159,7 @@ const InputWrapper: FC<InputWrapperProps> = ({
         )}
       </div>
 
-      {hasError && (
-        <Typography
-          className={twMerge(
-            'text-red-70 dark:text-red-50',
-            errorMessageClassName,
-          )}
-          variant="body1"
-        >
-          * {errorMessage}
-        </Typography>
-      )}
+      {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
     </div>
   );
 };
diff --git a/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx b/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx
index ff88ff4663..2d6ea52fa4 100644
--- a/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx
+++ b/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx
@@ -60,7 +60,7 @@ const KeyStatsItem: FC<KeyStatsItemProps> = ({
       <div className="flex items-center gap-0.5">
         <Typography
           variant="body1"
-          className="text-mono-140 dark:text-mono-40 whitespace-nowrap"
+          className="text-mono-140 dark:text-mono-80 whitespace-nowrap"
         >
           {title}
         </Typography>
diff --git a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx
index 70a1e207b6..babfbe7a59 100644
--- a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx
@@ -23,6 +23,7 @@ import {
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { ActionItemType } from '@webb-tools/webb-ui-components/components/ActionsDropdown/types';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import assert from 'assert';
 import { FC, useEffect, useMemo, useState } from 'react';
@@ -38,7 +39,6 @@ import { TableStatus } from '..';
 import BlueIconButton from '../BlueIconButton';
 import PercentageCell from '../tableCells/PercentageCell';
 import TokenAmountCell from '../tableCells/TokenAmountCell';
-import { sharedTableStatusClxs } from '../tables/shared';
 import UpdateCommissionModal from './UpdateCommissionModal';
 
 export interface LsMyPoolRow extends LsPool {
@@ -299,17 +299,15 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
   if (!isAccountConnected) {
     return (
       <TableStatus
-        className={sharedTableStatusClxs}
-        title="Connect a wallet to continue"
-        description="Once you've connected an account, you'll be able to see and manage your liquid staking pools here."
+        title="Wallet Not Connected"
+        description="Once you've connected an account, you'll be able to increase stake, unstake, and manage your liquid staking pools here."
         icon="🔍"
       />
     );
   } else if (pools.length === 0) {
     return (
       <TableStatus
-        title="No active pools"
-        className={sharedTableStatusClxs}
+        title="No Active Pools"
         description="You haven't staked in any pools yet. Select a pool and start liquid staking to earn rewards! Once you've staked or created a pool, you'll be able to manage your stake and configure the pool here."
         icon="🔍"
         buttonText="Learn More"
@@ -324,15 +322,10 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
   return (
     <>
       <Table
+        variant={TableVariant.GLASS_INNER}
         tableProps={table}
         title={pluralize('pool', pools.length > 1 || pools.length === 0)}
-        className={twMerge(
-          'rounded-2xl overflow-hidden bg-mono-20 dark:bg-mono-200 px-3',
-          isShown ? 'animate-slide-down' : 'animate-slide-up',
-        )}
-        thClassName="py-3 !font-normal !bg-transparent border-t-0 border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160"
-        tbodyClassName="!bg-transparent"
-        tdClassName="!bg-inherit border-t-0"
+        className={twMerge(isShown ? 'animate-slide-down' : 'animate-slide-up')}
         isPaginated
       />
 
diff --git a/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx
index cfd2ec0c9f..83f63bc148 100644
--- a/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx
@@ -23,6 +23,7 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { useLsStore } from '../../data/liquidStaking/useLsStore';
@@ -194,9 +195,7 @@ export const LsValidatorTable = () => {
               />
 
               <Table
-                thClassName="!bg-inherit border-t-0 bg-mono-0 !px-3 !py-2 whitespace-nowrap"
-                trClassName="!bg-inherit"
-                tdClassName="!bg-inherit !px-3 !py-2 whitespace-nowrap"
+                variant={TableVariant.DEFAULT}
                 tableProps={table}
                 totalRecords={tableData.length}
               />
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx
index be7683f827..f21fb40e62 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DetailItem.tsx
@@ -8,6 +8,7 @@ import {
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { FC, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import ExternalLink from '../ExternalLink';
 
@@ -15,9 +16,15 @@ type DetailItemProps = {
   title: string;
   tooltip?: string;
   value: Error | ReactNode | string | null;
+  className?: string;
 };
 
-const DetailItem: FC<DetailItemProps> = ({ title, tooltip, value }) => {
+const DetailItem: FC<DetailItemProps> = ({
+  title,
+  tooltip,
+  value,
+  className,
+}) => {
   return (
     <div className="flex gap-2 justify-between w-full">
       <div className="flex items-center gap-1">
@@ -39,7 +46,11 @@ const DetailItem: FC<DetailItemProps> = ({ title, tooltip, value }) => {
       </div>
 
       {typeof value === 'string' ? (
-        <Typography className="dark:text-mono-0" variant="body1" fw="bold">
+        <Typography
+          className={twMerge('dark:text-mono-0', className)}
+          variant="body1"
+          fw="bold"
+        >
           {value}
         </Typography>
       ) : value === null ? (
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx
index 50b45b634b..c79a8cc55b 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx
@@ -14,7 +14,7 @@ const DropdownChevronIcon: FC<DropdownChevronIconProps> = ({
   return (
     <div
       className={twMerge(
-        'p-1 rounded-lg group-hover:dark:bg-mono-160',
+        'p-1 rounded-lg group-hover:bg-mono-40 group-hover:dark:bg-mono-160',
         onClick !== undefined && 'cursor-pointer',
       )}
       onClick={onClick}
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx
index 0f5535025a..99e3ce4b61 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx
@@ -2,6 +2,7 @@ import { BN, BN_ZERO } from '@polkadot/util';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import { FC, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import formatBn from '../../../utils/formatBn';
 import formatFractional from '../../../utils/formatFractional';
@@ -54,7 +55,17 @@ const FeeDetailItem: FC<FeeDetailItemProps> = ({
       ? 'Fee'
       : `Fee (${formatFractional(feePercentage * 100)})`;
 
-  return <DetailItem title={feeTitle} value={formattedFeeAmount} />;
+  return (
+    <DetailItem
+      title={feeTitle}
+      value={formattedFeeAmount}
+      className={twMerge(
+        typeof feePercentage === 'number' &&
+          feePercentage > 0.1 &&
+          'text-yellow-500',
+      )}
+    />
+  );
 };
 
 export default FeeDetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx
index 2c553a04f3..1cab888baf 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { BN } from '@polkadot/util';
 import { WalletFillIcon, WalletLineIcon } from '@webb-tools/icons';
 import {
   SkeletonLoader,
@@ -66,8 +67,7 @@ const LsAgnosticBalance: FC<LsAgnosticBalanceProps> = ({
 
   const isClickable =
     onlyShowTooltipWhenBalanceIsSet &&
-    balance !== null &&
-    typeof balance !== 'string' &&
+    balance instanceof BN &&
     !balance.isZero();
 
   const handleClick = useCallback(() => {
@@ -97,7 +97,7 @@ const LsAgnosticBalance: FC<LsAgnosticBalanceProps> = ({
       )}
 
       {formattedBalance === null ? (
-        <SkeletonLoader className="w-12 rounded-2xl" size="md" />
+        <SkeletonLoader className="w-12 rounded-2xl bg-mono-60" size="md" />
       ) : (
         <Typography
           variant="body1"
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx
deleted file mode 100644
index 2291f48334..0000000000
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
-import { Alert } from '@webb-tools/webb-ui-components';
-import { FC } from 'react';
-
-import useLsFeePercentage from './useLsFeePercentage';
-
-// 10%.
-const THRESHOLD_PERCENTAGE = 0.1;
-
-export type LsFeeWarningProps = {
-  isMinting: boolean;
-  selectedProtocolId: LsProtocolId;
-};
-
-const LsFeeWarning: FC<LsFeeWarningProps> = ({ selectedProtocolId }) => {
-  const fee = useLsFeePercentage(selectedProtocolId, true);
-
-  return (
-    typeof fee === 'number' &&
-    fee >= THRESHOLD_PERCENTAGE && (
-      <Alert
-        type="warning"
-        title="High fees"
-        description="The fee for liquid staking this asset is higher than 10% of the amount."
-      />
-    )
-  );
-};
-
-export default LsFeeWarning;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx
index 3d28fa297b..e959d0be64 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx
@@ -2,7 +2,6 @@
 
 import { BN } from '@polkadot/util';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
-import { Typography } from '@webb-tools/webb-ui-components';
 import { forwardRef, ReactNode, useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -13,6 +12,7 @@ import { useLsStore } from '../../../data/liquidStaking/useLsStore';
 import useInputAmount from '../../../hooks/useInputAmount';
 import formatBn from '../../../utils/formatBn';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
+import ErrorMessage from '../../ErrorMessage';
 import LsNetworkSwitcher from './LsNetworkSwitcher';
 import SelectedPoolIndicator from './SelectedPoolIndicator';
 import TokenChip from './TokenChip';
@@ -105,7 +105,7 @@ const LsInput = forwardRef<HTMLInputElement, LsInputProps>(
       <div className="flex flex-col items-stretch justify-start gap-2">
         <div
           className={twMerge(
-            'flex flex-col gap-3 bg-liquid_staking_input dark:bg-liquid_staking_input_dark p-4 rounded-lg border border-transparent',
+            'flex flex-col gap-3 bg-mono-20 dark:bg-mono-180 p-4 rounded-lg border border-transparent',
             isError && 'border-red-70 dark:border-red-50',
           )}
         >
@@ -147,11 +147,7 @@ const LsInput = forwardRef<HTMLInputElement, LsInputProps>(
           </div>
         </div>
 
-        {errorMessage !== null && (
-          <Typography variant="body2" className="text-red-70 dark:text-red-50">
-            * {errorMessage}
-          </Typography>
-        )}
+        {errorMessage !== null && <ErrorMessage>{errorMessage}</ErrorMessage>}
       </div>
     );
   },
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx
index cdab60f8fc..8c0de09552 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx
@@ -12,6 +12,7 @@ import {
   useModal,
 } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { IS_PRODUCTION_ENV } from '../../../constants/env';
 import { LS_NETWORKS } from '../../../constants/liquidStaking/constants';
@@ -47,7 +48,13 @@ const LsNetworkSwitcher: FC<LsNetworkSwitcherProps> = ({
   } = useModal(false);
 
   const base = (
-    <div className="group flex gap-1 items-center justify-center">
+    <div
+      onClick={isReadOnly ? undefined : openLsNetworkSwitcher}
+      className={twMerge(
+        'group flex gap-1 items-center justify-center',
+        !isReadOnly && 'cursor-pointer',
+      )}
+    >
       <div className="flex gap-2 items-center justify-center">
         <ChainIcon size="lg" name={activeLsNetwork.chainIconFileName} />
 
@@ -56,12 +63,7 @@ const LsNetworkSwitcher: FC<LsNetworkSwitcherProps> = ({
         </Typography>
       </div>
 
-      {!isReadOnly && (
-        <DropdownChevronIcon
-          isLarge
-          onClick={!isReadOnly ? openLsNetworkSwitcher : undefined}
-        />
-      )}
+      {!isReadOnly && <DropdownChevronIcon isLarge />}
     </div>
   );
 
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx
index 29aebe5383..3064fa21f3 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx
@@ -18,12 +18,12 @@ import {
 import formatBn from '../../../utils/formatBn';
 import formatFractional from '../../../utils/formatFractional';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
-import EmptyList from '../../EmptyList';
 import { ListCardWrapper } from '../../Lists/ListCardWrapper';
+import ListStatus from '../../ListStatus';
 import SkeletonRows from '../SkeletonRows';
 
 export type LsSelectLstModalProps = {
-  pools: LsPool[] | null;
+  pools: LsPool[] | Error | null;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   onSelect: (lsPoolId: number) => void;
@@ -40,8 +40,8 @@ const LsSelectLstModal: FC<LsSelectLstModalProps> = ({
   const [searchQuery, setSearchQuery] = useState('');
 
   const filteredPools = useMemo(() => {
-    if (pools === null) {
-      return null;
+    if (!Array.isArray(pools)) {
+      return pools;
     }
 
     return pools.filter((pool) => {
@@ -53,8 +53,8 @@ const LsSelectLstModal: FC<LsSelectLstModalProps> = ({
 
   // Sort pools by highest TVL in descending order.
   const sortedPools = useMemo(() => {
-    if (filteredPools === null) {
-      return null;
+    if (!Array.isArray(filteredPools)) {
+      return filteredPools;
     }
 
     return filteredPools.toSorted((a, b) => {
@@ -70,7 +70,7 @@ const LsSelectLstModal: FC<LsSelectLstModalProps> = ({
         size="md"
         className={twMerge(
           'max-h-[600px]',
-          pools !== null && pools.length > 0 && 'h-full',
+          Array.isArray(pools) && pools.length > 0 && 'h-full',
         )}
       >
         <ListCardWrapper
@@ -92,10 +92,20 @@ const LsSelectLstModal: FC<LsSelectLstModalProps> = ({
 
           <ScrollArea className="w-full h-full pt-4">
             <ul>
-              {pools !== null && pools.length === 0 ? (
-                <EmptyList
-                  title="No pools available"
-                  description="Create your own to get started!"
+              {sortedPools instanceof Error ? (
+                <ListStatus title="Error" description={sortedPools.message} />
+              ) : Array.isArray(sortedPools) &&
+                sortedPools.length === 0 &&
+                searchQuery.length > 0 ? (
+                <ListStatus
+                  title="Nothing Found"
+                  description="No LSTs found matching your search query."
+                  className="my-16"
+                />
+              ) : Array.isArray(sortedPools) && sortedPools.length === 0 ? (
+                <ListStatus
+                  title="No LSTs Available"
+                  description="Create your own pool to get started!"
                   className="my-16"
                 />
               ) : (
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx
index 0ed377e374..242cbdfa1d 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx
@@ -7,6 +7,7 @@ import '@webb-tools/tangle-restaking-types';
 import { BN } from '@polkadot/util';
 import { ArrowDownIcon } from '@webb-tools/icons';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
+import { Card } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -30,10 +31,10 @@ import useSearchParamSync from '../../../hooks/useSearchParamSync';
 import { TxStatus } from '../../../hooks/useSubstrateTx';
 import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef';
 import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage';
+import DetailsContainer from '../../DetailsContainer';
 import ExchangeRateDetailItem from './ExchangeRateDetailItem';
 import FeeDetailItem from './FeeDetailItem';
 import LsAgnosticBalance from './LsAgnosticBalance';
-import LsFeeWarning from './LsFeeWarning';
 import LsInput from './LsInput';
 import LsSelectLstModal from './LsSelectLstModal';
 import UnstakePeriodDetailItem from './UnstakePeriodDetailItem';
@@ -74,7 +75,7 @@ const LsStakeCard: FC = () => {
   const fromLsInputRef = useRef<HTMLInputElement>(null);
 
   const actionText = useMemo(() => {
-    const defaultText = 'Mint';
+    const defaultText = 'Stake';
 
     if (lsPoolMembers === null) {
       return defaultText;
@@ -207,14 +208,17 @@ const LsStakeCard: FC = () => {
 
   const allPools = useMemo(() => {
     if (!(lsPools instanceof Map)) {
-      return null;
+      return lsPools;
     }
 
     return Array.from(lsPools.values());
   }, [lsPools]);
 
   return (
-    <div className="flex flex-col items-stretch justify-center gap-2">
+    <Card
+      withShadow
+      className="flex flex-col items-stretch justify-center gap-2"
+    >
       <LsInput
         ref={fromLsInputRef}
         id="liquid-staking-stake-from"
@@ -248,7 +252,7 @@ const LsStakeCard: FC = () => {
       />
 
       {/* Details */}
-      <div className="flex flex-col gap-2 p-3">
+      <DetailsContainer>
         <UnstakePeriodDetailItem protocolId={lsProtocolId} />
 
         <ExchangeRateDetailItem
@@ -261,9 +265,7 @@ const LsStakeCard: FC = () => {
           isStaking
           protocolId={lsProtocolId}
         />
-      </div>
-
-      <LsFeeWarning isMinting selectedProtocolId={lsProtocolId} />
+      </DetailsContainer>
 
       <Button
         isDisabled={
@@ -291,7 +293,7 @@ const LsStakeCard: FC = () => {
         setIsOpen={setIsSelectTokenModalOpen}
         onSelect={setLsPoolId}
       />
-    </div>
+    </Card>
   );
 };
 
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx
index 316cfd1c26..7b132c9f1d 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx
@@ -7,7 +7,7 @@ import '@webb-tools/tangle-restaking-types';
 import { BN } from '@polkadot/util';
 import { ArrowDownIcon } from '@radix-ui/react-icons';
 import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking';
-import { Button } from '@webb-tools/webb-ui-components';
+import { Button, Card } from '@webb-tools/webb-ui-components';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { z } from 'zod';
@@ -33,7 +33,6 @@ import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage';
 import ExchangeRateDetailItem from './ExchangeRateDetailItem';
 import FeeDetailItem from './FeeDetailItem';
 import LsAgnosticBalance from './LsAgnosticBalance';
-import LsFeeWarning from './LsFeeWarning';
 import LsInput from './LsInput';
 import LsSelectLstModal from './LsSelectLstModal';
 import UnstakePeriodDetailItem from './UnstakePeriodDetailItem';
@@ -194,83 +193,88 @@ const LsUnstakeCard: FC = () => {
 
   return (
     <>
-      {/* TODO: Have a way to trigger a refresh of the amount once the wallet balance (max) button is clicked. Need to signal to the liquid staking input to update its display amount based on the `fromAmount` prop. */}
-      <LsInput
-        ref={fromLsInputRef}
-        id="liquid-staking-unstake-from"
-        networkId={lsNetworkId}
-        // TODO: This might be causing many requests to try to change the network. Bug.
-        setNetworkId={tryChangeNetwork}
-        setProtocolId={setLsProtocolId}
-        token={selectedProtocol.token}
-        amount={fromAmount}
-        decimals={selectedProtocol.decimals}
-        onAmountChange={setFromAmount}
-        placeholder="Enter amount to unstake"
-        rightElement={stakedWalletBalance}
-        isDerivativeVariant
-        minAmount={minSpendable ?? undefined}
-        maxAmount={maxSpendable ?? undefined}
-        maxErrorMessage="Not enough stake to redeem"
-        // Disable the token click if there's no account connected
-        // since it won't be possible to fetch the user's pools
-        // then.
-        onTokenClick={
-          isAccountConnected ? () => setIsSelectTokenModalOpen(true) : undefined
-        }
-      />
-
-      <ArrowDownIcon className="self-center dark:fill-mono-0 w-7 h-7" />
-
-      <LsInput
-        id="liquid-staking-unstake-to"
-        networkId={lsNetworkId}
-        amount={toAmount}
-        decimals={selectedProtocol.decimals}
-        placeholder={EMPTY_VALUE_PLACEHOLDER}
-        token={selectedProtocol.token}
-        isReadOnly
-        className={isRefreshingExchangeRate ? 'animate-pulse' : undefined}
-        showPoolIndicator={false}
-      />
+      <Card
+        withShadow
+        className="flex flex-col items-stretch justify-center gap-2"
+      >
+        {/* TODO: Have a way to trigger a refresh of the amount once the wallet balance (max) button is clicked. Need to signal to the liquid staking input to update its display amount based on the `fromAmount` prop. */}
+        <LsInput
+          ref={fromLsInputRef}
+          id="liquid-staking-unstake-from"
+          networkId={lsNetworkId}
+          // TODO: This might be causing many requests to try to change the network. Bug.
+          setNetworkId={tryChangeNetwork}
+          setProtocolId={setLsProtocolId}
+          token={selectedProtocol.token}
+          amount={fromAmount}
+          decimals={selectedProtocol.decimals}
+          onAmountChange={setFromAmount}
+          placeholder="Enter amount to unstake"
+          rightElement={stakedWalletBalance}
+          isDerivativeVariant
+          minAmount={minSpendable ?? undefined}
+          maxAmount={maxSpendable ?? undefined}
+          maxErrorMessage="Not enough stake to redeem"
+          // Disable the token click if there's no account connected
+          // since it won't be possible to fetch the user's pools
+          // then.
+          onTokenClick={
+            isAccountConnected
+              ? () => setIsSelectTokenModalOpen(true)
+              : undefined
+          }
+        />
 
-      {/* Details */}
-      <div className="flex flex-col gap-2 p-3">
-        <UnstakePeriodDetailItem protocolId={lsProtocolId} />
+        <ArrowDownIcon className="self-center dark:fill-mono-0 w-7 h-7" />
 
-        <ExchangeRateDetailItem
+        <LsInput
+          id="liquid-staking-unstake-to"
+          networkId={lsNetworkId}
+          amount={toAmount}
+          decimals={selectedProtocol.decimals}
+          placeholder={EMPTY_VALUE_PLACEHOLDER}
           token={selectedProtocol.token}
-          type={ExchangeRateType.DerivativeToNative}
+          isReadOnly
+          className={isRefreshingExchangeRate ? 'animate-pulse' : undefined}
+          showPoolIndicator={false}
         />
 
-        <FeeDetailItem
-          protocolId={lsProtocolId}
-          isStaking={false}
-          inputAmount={fromAmount}
-        />
-      </div>
-
-      <LsFeeWarning isMinting={false} selectedProtocolId={lsProtocolId} />
-
-      <Button
-        isDisabled={
-          // No active account.
-          activeAccountAddress === null ||
-          !canCallUnstake ||
-          // Amount not yet provided or is zero.
-          fromAmount === null ||
-          fromAmount.isZero()
-        }
-        isLoading={
-          parachainRedeemTxStatus === TxStatus.PROCESSING ||
-          tangleUnbondTxStatus === TxStatus.PROCESSING
-        }
-        loadingText="Processing"
-        onClick={handleUnstakeClick}
-        isFullWidth
-      >
-        Schedule Unstake
-      </Button>
+        {/* Details */}
+        <div className="flex flex-col gap-2 p-3">
+          <UnstakePeriodDetailItem protocolId={lsProtocolId} />
+
+          <ExchangeRateDetailItem
+            token={selectedProtocol.token}
+            type={ExchangeRateType.DerivativeToNative}
+          />
+
+          <FeeDetailItem
+            protocolId={lsProtocolId}
+            isStaking={false}
+            inputAmount={fromAmount}
+          />
+        </div>
+
+        <Button
+          isDisabled={
+            // No active account.
+            activeAccountAddress === null ||
+            !canCallUnstake ||
+            // Amount not yet provided or is zero.
+            fromAmount === null ||
+            fromAmount.isZero()
+          }
+          isLoading={
+            parachainRedeemTxStatus === TxStatus.PROCESSING ||
+            tangleUnbondTxStatus === TxStatus.PROCESSING
+          }
+          loadingText="Processing"
+          onClick={handleUnstakeClick}
+          isFullWidth
+        >
+          Schedule Unstake
+        </Button>
+      </Card>
 
       <LsSelectLstModal
         pools={myPoolsWithSelfStake}
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx
index f798f089d9..40e79a2a78 100644
--- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx
@@ -21,9 +21,10 @@ const SelectedPoolIndicator: FC<SelectedPoolIndicatorProps> = ({ onClick }) => {
     <div
       onClick={onClick}
       className={twMerge(
-        'group flex gap-2 justify-center items-center bg-mono-40 dark:bg-mono-170 px-4 py-2 rounded-lg',
+        'group flex gap-2 justify-center items-center px-4 py-2 rounded-lg',
+        'bg-mono-40 dark:bg-mono-170',
         onClick !== undefined &&
-          'cursor-pointer hover:bg-mono-20 hover:dark:bg-mono-160',
+          'cursor-pointer hover:bg-mono-60 hover:hover:dark:bg-mono-160',
       )}
     >
       {name !== null && (
diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx
index 67485484c2..82854ff1a2 100644
--- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx
@@ -15,12 +15,15 @@ import {
   TimeFillIcon,
 } from '@webb-tools/icons';
 import {
+  Card,
+  CardVariant,
   CheckBox,
   fuzzyFilter,
   Table,
   TANGLE_DOCS_LIQUID_STAKING_URL,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import assert from 'assert';
 import BN from 'bn.js';
 import { FC, ReactNode, useMemo } from 'react';
@@ -37,7 +40,6 @@ import addCommasToNumber from '../../../utils/addCommasToNumber';
 import formatFractional from '../../../utils/formatFractional';
 import isLsParachainChainId from '../../../utils/liquidStaking/isLsParachainChainId';
 import stringifyTimeUnit from '../../../utils/liquidStaking/stringifyTimeUnit';
-import GlassCard from '../../GlassCard';
 import { HeaderCell } from '../../tableCells';
 import TokenAmountCell from '../../tableCells/TokenAmountCell';
 import ExternalLink from '../ExternalLink';
@@ -198,7 +200,7 @@ const UnstakeRequestsTable: FC = () => {
     else if (rows === null) {
       return (
         <Notice
-          title="Unstake requests"
+          title="Unstake Requests"
           content={<SkeletonRows rowCount={5} />}
         />
       );
@@ -207,7 +209,7 @@ const UnstakeRequestsTable: FC = () => {
     else if (rows.length === 0) {
       return (
         <Notice
-          title="No unstake requests"
+          title="No Unstake Requests"
           content="You will be able to withdraw your tokens after the unstake request has been processed. Schedule an unstake request to get started."
         />
       );
@@ -215,9 +217,7 @@ const UnstakeRequestsTable: FC = () => {
 
     return (
       <Table
-        thClassName="!bg-inherit border-t-0 bg-mono-0 !px-3 !py-2 whitespace-nowrap"
-        trClassName="!bg-inherit"
-        tdClassName="!bg-inherit !px-3 !py-2 whitespace-nowrap"
+        variant={TableVariant.DEFAULT}
         tableProps={tableProps}
         totalRecords={rows.length}
         isPaginated
@@ -268,7 +268,8 @@ const UnstakeRequestsTable: FC = () => {
 
   return (
     <div className="space-y-4 flex-grow max-w-[700px]">
-      <GlassCard
+      <Card
+        variant={CardVariant.GLASS}
         className={twMerge(
           isDataState && 'flex flex-col justify-between min-h-[500px]',
         )}
@@ -294,7 +295,7 @@ const UnstakeRequestsTable: FC = () => {
             )}
           </div>
         )}
-      </GlassCard>
+      </Card>
 
       {rows !== null && rows.length === 0 && (
         <div className="flex items-center justify-end w-full">
diff --git a/apps/tangle-dapp/components/EmptyList.tsx b/apps/tangle-dapp/components/ListStatus.tsx
similarity index 83%
rename from apps/tangle-dapp/components/EmptyList.tsx
rename to apps/tangle-dapp/components/ListStatus.tsx
index 57df086b26..f13e34254a 100644
--- a/apps/tangle-dapp/components/EmptyList.tsx
+++ b/apps/tangle-dapp/components/ListStatus.tsx
@@ -2,13 +2,13 @@ import { Typography } from '@webb-tools/webb-ui-components';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-export type EmptyListProps = {
+export type ListStatusProps = {
   className?: string;
   title: string;
   description: string;
 };
 
-const EmptyList: FC<EmptyListProps> = ({ title, description, className }) => {
+const ListStatus: FC<ListStatusProps> = ({ title, description, className }) => {
   return (
     <div
       className={twMerge(
@@ -35,4 +35,4 @@ const EmptyList: FC<EmptyListProps> = ({ title, description, className }) => {
   );
 };
 
-export default EmptyList;
+export default ListStatus;
diff --git a/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx b/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx
index 82bca4a802..738a2a3f34 100644
--- a/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx
+++ b/apps/tangle-dapp/components/Lists/ListCardWrapper.tsx
@@ -32,7 +32,7 @@ export const ListCardWrapper = forwardRef<HTMLDivElement, ListCardWrapperProps>(
         {...props}
         className={twMerge(
           'flex flex-col overflow-hidden',
-          'rounded-xl bg-mono-0 dark:bg-mono-190 w-full h-full',
+          'rounded-xl w-full h-full',
           className,
         )}
         ref={ref}
diff --git a/apps/tangle-dapp/components/NetworkSelectorButton/index.tsx b/apps/tangle-dapp/components/NetworkSelectorButton/index.tsx
index 1634f19c23..a390187ff3 100644
--- a/apps/tangle-dapp/components/NetworkSelectorButton/index.tsx
+++ b/apps/tangle-dapp/components/NetworkSelectorButton/index.tsx
@@ -2,29 +2,23 @@
 
 import NetworkSelectorDropdown from '@webb-tools/tangle-shared-ui/components/NetworkSelectorDropdown';
 import { usePathname } from 'next/navigation';
-import { type FC, useMemo } from 'react';
+import { type FC } from 'react';
 
 import { PagePath } from '../../types';
 
 const NetworkSelectorButton: FC = () => {
   const pathname = usePathname();
 
-  // Disable network switching when in Liquid Staking page,
-  // since it would have no effect there.
   const isInLiquidStakingPage = pathname.startsWith(PagePath.LIQUID_STAKING);
 
-  const isInBridgePath = useMemo(
-    () => pathname.startsWith(PagePath.BRIDGE),
-    [pathname],
-  );
+  const isInBridgePath = pathname.startsWith(PagePath.BRIDGE);
 
-  if (isInBridgePath) {
+  // Disable network switching on certain pages.
+  if (isInBridgePath || isInLiquidStakingPage) {
     return null;
   }
 
-  return (
-    <NetworkSelectorDropdown isNetworkSwitchDisabled={isInLiquidStakingPage} />
-  );
+  return <NetworkSelectorDropdown />;
 };
 
 export default NetworkSelectorButton;
diff --git a/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx b/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx
index 9810b790e1..5ad64fbbea 100644
--- a/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx
+++ b/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx
@@ -18,6 +18,7 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { FC, useState } from 'react';
 
 import { Nominee } from '../../types';
@@ -139,6 +140,7 @@ const NominationsTable: FC<NominationsTableProps> = ({
   return (
     <div className="overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160">
       <Table
+        variant={TableVariant.DEFAULT}
         thClassName="border-t-0 bg-mono-0"
         paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
         tableProps={table}
diff --git a/apps/tangle-dapp/components/NominatorStatsItem/NominatorStatsItem.tsx b/apps/tangle-dapp/components/NominatorStatsItem/NominatorStatsItem.tsx
index b8ff5f1cd5..35a53a36bb 100644
--- a/apps/tangle-dapp/components/NominatorStatsItem/NominatorStatsItem.tsx
+++ b/apps/tangle-dapp/components/NominatorStatsItem/NominatorStatsItem.tsx
@@ -3,10 +3,16 @@ import {
   SkeletonLoader,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { NominatorStatsItemProps } from './types';
+export type NominatorStatsItemProps = {
+  title: string;
+  tooltip?: string | ReactNode;
+  className?: string;
+  children: ReactNode | null;
+  isError: boolean;
+};
 
 export const NominatorStatsItem: FC<NominatorStatsItemProps> = ({
   title,
@@ -16,7 +22,7 @@ export const NominatorStatsItem: FC<NominatorStatsItemProps> = ({
   isError,
 }) => {
   return (
-    <div className={twMerge('flex flex-col gap-4', className)}>
+    <div className={twMerge('flex flex-col gap-2', className)}>
       <div className="flex flex-col gap-1 sm:flex-row sm:items-center">
         <div className="flex items-center gap-0.5">
           {children === null ? (
diff --git a/apps/tangle-dapp/components/NominatorStatsItem/types.ts b/apps/tangle-dapp/components/NominatorStatsItem/types.ts
deleted file mode 100644
index 98ee8fd4be..0000000000
--- a/apps/tangle-dapp/components/NominatorStatsItem/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-export interface NominatorStatsItemProps {
-  title: string;
-  tooltip?: string | React.ReactNode;
-  className?: string;
-  children: React.ReactNode | null;
-  isError: boolean;
-}
diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx
deleted file mode 100644
index d219d32436..0000000000
--- a/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { IconButton, Typography } from '@webb-tools/webb-ui-components';
-import { usePathname } from 'next/navigation';
-import { FC } from 'react';
-
-import useOnboardingStore from '../../context/useOnboardingStore';
-import { PagePath } from '../../types';
-
-// TODO: Edge case: Restake -> Deposit page is missing proper handling (the question mark / reopen button shows up, but has no effect).
-const PAGES_WITH_ONBOARDING: PagePath[] = [
-  PagePath.LIQUID_STAKING,
-  PagePath.RESTAKE,
-  PagePath.NOMINATION,
-  PagePath.BRIDGE,
-];
-
-const OnboardingHelpButton: FC = () => {
-  const { setOnboardingReopenFlag } = useOnboardingStore();
-  const pathName = usePathname();
-
-  const isOnOnboardingPage = PAGES_WITH_ONBOARDING.some((pagePath) =>
-    pathName.startsWith(pagePath),
-  );
-
-  // Don't render if on a page that doesn't have onboarding.
-  if (!isOnOnboardingPage) {
-    return null;
-  }
-
-  return (
-    <IconButton
-      onClick={() => setOnboardingReopenFlag(true)}
-      tooltip="Learn how to use this page"
-      className="rounded-full border-2 py-2 px-4 bg-mono-0/10 border-mono-60 dark:bg-mono-0/5 dark:border-mono-140 dark:hover:bg-mono-0/10"
-    >
-      <Typography variant="body1" fw="bold">
-        ?
-      </Typography>
-    </IconButton>
-  );
-};
-
-export default OnboardingHelpButton;
diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx
deleted file mode 100644
index e6e5bd98da..0000000000
--- a/apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { IconBase } from '@webb-tools/icons/types';
-import { Typography } from '@webb-tools/webb-ui-components';
-import { FC, JSX } from 'react';
-
-export type OnboardingItemProps = {
-  Icon: (props: IconBase) => JSX.Element;
-  title: string;
-  description: string;
-};
-
-const OnboardingItem: FC<OnboardingItemProps> = ({
-  title,
-  description,
-  Icon,
-}) => {
-  return (
-    <div className="flex items-start justify-start gap-4">
-      <Icon size="lg" className="mt-2" />
-
-      <div className="flex flex-col items-start justify-center">
-        <Typography variant="h5" fw="medium">
-          {title}
-        </Typography>
-
-        <Typography variant="body1">{description}</Typography>
-      </div>
-    </div>
-  );
-};
-
-export default OnboardingItem;
diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx
deleted file mode 100644
index dfeca8838c..0000000000
--- a/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client';
-
-import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants';
-import useLocalStorage, {
-  LocalStorageKey,
-} from '@webb-tools/tangle-shared-ui/hooks/useLocalStorage';
-import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooterActions,
-  ModalHeader,
-  TANGLE_DOCS_URL,
-} from '@webb-tools/webb-ui-components';
-import { FC, ReactElement, useEffect, useRef, useState } from 'react';
-
-import useOnboardingStore from '../../context/useOnboardingStore';
-import { OnboardingItemProps } from './OnboardingItem';
-
-export type OnboardingModalProps = {
-  title?: string;
-  pageKey: OnboardingPageKey;
-  learnMoreHref?: string;
-  children:
-    | ReactElement<OnboardingItemProps>
-    | ReactElement<OnboardingItemProps>[];
-};
-
-const OnboardingModal: FC<OnboardingModalProps> = ({
-  title = 'Quick Start',
-  pageKey,
-  children,
-  learnMoreHref = TANGLE_DOCS_URL,
-}) => {
-  const { onboardingReopenFlag, setOnboardingReopenFlag } =
-    useOnboardingStore();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const seenRef = useRef(false);
-
-  const { setWithPreviousValue, refresh } = useLocalStorage(
-    LocalStorageKey.ONBOARDING_MODALS_SEEN,
-  );
-
-  // Re-open the modal if the user has requested so by clicking the
-  // help button, which raises a global flag.
-  useEffect(() => {
-    if (onboardingReopenFlag) {
-      setOnboardingReopenFlag(false);
-      setIsOpen(true);
-    }
-  }, [onboardingReopenFlag, setOnboardingReopenFlag]);
-
-  // On load, check if the user has seen this modal before.
-  // If not, then trigger the modal to be shown, and remember
-  // that it has been seen.
-  useEffect(() => {
-    // Handle any possible data race.
-    if (seenRef.current) {
-      return;
-    }
-
-    const seenOpt = refresh();
-    const seen = seenOpt.orElse([]);
-
-    // The user hasn't seen this modal yet. Show it, and remember
-    // that it has been seen.
-    if (!seen.includes(pageKey)) {
-      seenRef.current = true;
-      setIsOpen(true);
-
-      setWithPreviousValue((prev) => {
-        if (prev === null || prev.value === null) {
-          return [pageKey];
-        }
-
-        return [...prev.value, pageKey];
-      });
-    }
-  }, [pageKey, refresh, setWithPreviousValue]);
-
-  return (
-    <Modal open>
-      <ModalContent
-        onInteractOutside={() => setIsOpen(false)}
-        isOpen={isOpen}
-        size="md"
-      >
-        <ModalHeader onClose={() => setIsOpen(false)}>{title}</ModalHeader>
-
-        <ModalBody>{children}</ModalBody>
-
-        <ModalFooterActions
-          learnMoreLinkHref={learnMoreHref}
-          onConfirm={() => setIsOpen(false)}
-          confirmButtonText="Got It"
-        />
-      </ModalContent>
-    </Modal>
-  );
-};
-
-export default OnboardingModal;
diff --git a/apps/tangle-dapp/components/OnboardingModal/index.ts b/apps/tangle-dapp/components/OnboardingModal/index.ts
deleted file mode 100644
index e8e82237c8..0000000000
--- a/apps/tangle-dapp/components/OnboardingModal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './OnboardingItem';
-export * from './OnboardingModal';
diff --git a/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx b/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx
index 58a86861a7..899689fa27 100644
--- a/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx
+++ b/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx
@@ -25,9 +25,11 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { type FC, useState } from 'react';
 
 import PayoutTxContainer from '../../containers/PayoutTxContainer/PayoutTxContainer';
+import pluralize from '../../utils/pluralize';
 import { sortBnValueForPayout } from '../../utils/table';
 import { HeaderCell, StringCell } from '../tableCells';
 import TokenAmountCell from '../tableCells/TokenAmountCell';
@@ -231,11 +233,11 @@ const PayoutTable: FC<PayoutTableProps> = ({
     <>
       <div className="overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160">
         <Table
-          thClassName="border-t-0 bg-mono-0"
-          paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
+          variant={TableVariant.DEFAULT}
           tableProps={table}
           isPaginated
           totalRecords={data.length}
+          title={pluralize('payout', data.length !== 1)}
         />
       </div>
 
diff --git a/apps/tangle-dapp/components/ServiceTable/ServiceTable.tsx b/apps/tangle-dapp/components/ServiceTable/ServiceTable.tsx
deleted file mode 100644
index a1df4f3764..0000000000
--- a/apps/tangle-dapp/components/ServiceTable/ServiceTable.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  Button,
-  Chip,
-  fuzzyFilter,
-  Table,
-} from '@webb-tools/webb-ui-components';
-import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
-import cx from 'classnames';
-import Link from 'next/link';
-import { FC, useMemo } from 'react';
-
-import useFormatNativeTokenAmount from '../../hooks/useFormatNativeTokenAmount';
-import { PagePath, type Service } from '../../types';
-import { getChipColorOfServiceType } from '../../utils';
-import { HeaderCell, StringCell } from '../tableCells';
-import type { ServiceTableProps } from './types';
-
-const columnHelper = createColumnHelper<Service>();
-
-const EARNINGS_COLUMN_IDX = 5;
-
-const staticColumns = [
-  columnHelper.accessor('serviceType', {
-    header: () => <HeaderCell title="Service Type" className="justify-start" />,
-    cell: (props) => (
-      <Chip
-        color={getChipColorOfServiceType(props.getValue())}
-        className="normal-case"
-      >
-        {props.getValue()}
-      </Chip>
-    ),
-  }),
-  columnHelper.accessor('id', {
-    header: () => (
-      <HeaderCell title="Initial Job Id" className="justify-start" />
-    ),
-    cell: (props) => <StringCell value={props.getValue().toString()} />,
-  }),
-  columnHelper.accessor('participants', {
-    header: () => (
-      <HeaderCell title="# of Participants" className="justify-start" />
-    ),
-    cell: (props) => <Chip color="dark-grey">{props.getValue().length}</Chip>,
-  }),
-  columnHelper.accessor('threshold', {
-    header: () => <HeaderCell title="Threshold" className="justify-start" />,
-    cell: (props) => {
-      const thresholds = props.getValue();
-      return typeof thresholds === 'number' ? (
-        <Chip color="dark-grey">{thresholds}</Chip>
-      ) : (
-        EMPTY_VALUE_PLACEHOLDER
-      );
-    },
-  }),
-  // TODO: hide this column because we cannot get inactive jobs for now
-  // columnHelper.accessor('jobsCount', {
-  //   header: () => <HeaderCell title="# of Jobs" className="justify-start" />,
-  //   cell: (props) => {
-  //     const jobsCount = props.getValue();
-  //     return jobsCount ? <StringCell value={`${jobsCount}`} /> : EMPTY_VALUE_PLACEHOLDER;
-  //   },
-  // }),
-  columnHelper.accessor('expirationBlock', {
-    header: () => (
-      <HeaderCell title="Expiration Block" className="justify-center" />
-    ),
-    cell: (props) => (
-      <StringCell
-        value={`${props.getValue().toString()}`}
-        className="text-center"
-      />
-    ),
-  }),
-  columnHelper.accessor('id', {
-    id: 'details',
-    header: () => null,
-    cell: (props) => (
-      <Button
-        as={Link}
-        variant="link"
-        size="sm"
-        className="mx-auto"
-        href={`${PagePath.SERVICES}/${props.row.original.id}`}
-      >
-        DETAILS
-      </Button>
-    ),
-  }),
-];
-
-const ServiceTable: FC<ServiceTableProps> = ({ data, pageSize }) => {
-  const formatNativeTokenAmount = useFormatNativeTokenAmount();
-
-  const columns = useMemo(
-    () => [
-      ...staticColumns.slice(0, EARNINGS_COLUMN_IDX),
-      columnHelper.accessor('earnings', {
-        header: () => (
-          <HeaderCell
-            title="Earnings"
-            className="justify-start"
-            tooltip="The rewards received by each participant in the service"
-          />
-        ),
-        cell: (props) => {
-          const earnings = props.getValue();
-
-          return earnings ? (
-            <StringCell value={formatNativeTokenAmount(earnings)} />
-          ) : (
-            EMPTY_VALUE_PLACEHOLDER
-          );
-        },
-      }),
-      ...staticColumns.slice(EARNINGS_COLUMN_IDX),
-    ],
-    [formatNativeTokenAmount],
-  );
-
-  const table = useReactTable({
-    data,
-    columns,
-    initialState: {
-      pagination: {
-        pageSize,
-      },
-    },
-    filterFns: {
-      fuzzy: fuzzyFilter,
-    },
-    globalFilterFn: fuzzyFilter,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-  });
-
-  return (
-    <div
-      className={cx(
-        'bg-[linear-gradient(180deg,#FFF_0%,rgba(255,255,255,0.00)_100%)]',
-        'dark:bg-[linear-gradient(180deg,#2B2F40_0%,rgba(43,47,64,0.00)_100%)]',
-        'overflow-hidden rounded-2xl py-3 px-4',
-        'border border-mono-0 dark:border-mono-160',
-      )}
-    >
-      <Table
-        thClassName="!bg-inherit !px-3 border-t-0 bg-mono-0 whitespace-nowrap"
-        trClassName="!bg-inherit cursor-pointer"
-        tdClassName="!bg-inherit !px-3 whitespace-nowrap !border-t-0"
-        tableProps={table}
-        isPaginated
-        totalRecords={data.length}
-      />
-    </div>
-  );
-};
-
-export default ServiceTable;
diff --git a/apps/tangle-dapp/components/ServiceTable/index.ts b/apps/tangle-dapp/components/ServiceTable/index.ts
deleted file mode 100644
index 4e81929eeb..0000000000
--- a/apps/tangle-dapp/components/ServiceTable/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ServiceTable } from './ServiceTable';
diff --git a/apps/tangle-dapp/components/ServiceTable/types.ts b/apps/tangle-dapp/components/ServiceTable/types.ts
deleted file mode 100644
index f3f2b2f061..0000000000
--- a/apps/tangle-dapp/components/ServiceTable/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { Service } from '../../types';
-
-export interface ServiceTableProps {
-  data: Service[];
-  pageSize: number;
-}
diff --git a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts
index f23b7aac01..5d87d15734 100644
--- a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts
+++ b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts
@@ -8,10 +8,10 @@ import {
   GiftLineIcon,
   GlobalLine,
   GridFillIcon,
+  HomeFillIcon,
   PolkadotJs,
   ShuffleLine,
   TokenSwapFill,
-  UserFillIcon,
   WaterDropletIcon,
 } from '@webb-tools/icons';
 import {
@@ -36,7 +36,7 @@ const SIDEBAR_STATIC_ITEMS: SideBarItemProps[] = [
     href: PagePath.ACCOUNT,
     isInternal: true,
     isNext: true,
-    Icon: UserFillIcon,
+    Icon: HomeFillIcon,
     subItems: [],
   },
   {
@@ -94,7 +94,7 @@ const SIDEBAR_FOOTER: SideBarFooterType = {
   Icon: DocumentationIcon,
   href: TANGLE_DOCS_URL,
   isInternal: false,
-  name: 'Tangle Docs',
+  name: 'Docs',
   useNextThemesForThemeToggle: true,
 };
 
diff --git a/apps/tangle-dapp/components/TableStatus/TableStatus.tsx b/apps/tangle-dapp/components/TableStatus/TableStatus.tsx
index 02e9f39429..57494edb55 100644
--- a/apps/tangle-dapp/components/TableStatus/TableStatus.tsx
+++ b/apps/tangle-dapp/components/TableStatus/TableStatus.tsx
@@ -3,6 +3,14 @@ import { twMerge } from 'tailwind-merge';
 
 import { TableStatusProps } from './types';
 
+const GRID_BACKGROUND_CLASS = twMerge(
+  'relative px-6 py-10 rounded-2xl !bg-[unset] border-mono-0 dark:border-mono-160 backdrop-blur-2xl',
+  'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
+  'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
+  'before:absolute before:inset-0 before:bg-cover before:bg-no-repeat before:opacity-30 before:pointer-events-none',
+  "before:bg-[url('/static/assets/blueprints/grid-bg.png')] dark:before:bg-[url('/static/assets/blueprints/grid-bg-dark.png')]",
+);
+
 const TableStatus = ({
   title,
   description,
@@ -16,7 +24,8 @@ const TableStatus = ({
       className={twMerge(
         'rounded-lg border border-mono-40 dark:border-mono-160',
         'bg-mono-0 dark:bg-mono-180',
-        'flex flex-col items-center justify-center gap-6 p-4',
+        'flex flex-col items-center justify-center gap-3 p-4',
+        GRID_BACKGROUND_CLASS,
         className,
       )}
     >
diff --git a/apps/tangle-dapp/components/TangleCard/TangleCard.tsx b/apps/tangle-dapp/components/TangleCard/TangleCard.tsx
deleted file mode 100644
index 01e70b6e71..0000000000
--- a/apps/tangle-dapp/components/TangleCard/TangleCard.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Card } from '@webb-tools/webb-ui-components/components/Card';
-import { type ElementRef, forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import TangleBigLogo from '../TangleBigLogo';
-import { TangleCardProps } from './types';
-
-const TangleCard = forwardRef<ElementRef<'div'>, TangleCardProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Card
-        {...props}
-        ref={ref}
-        className={twMerge(
-          'w-full flex items-center md:max-w-[556px] overflow-hidden space-y-0',
-          'relative rounded-2xl shadow-sm border p-6',
-          'border-mono-0 bg-mono-0/70 dark:border-mono-160 dark:bg-mono-0/5',
-          className,
-        )}
-      >
-        {children}
-
-        <TangleBigLogo className="absolute top-[50%] translate-y-[-50%] right-0 rounded-br-2xl" />
-      </Card>
-    );
-  },
-);
-
-TangleCard.displayName = 'TangleCard';
-
-export default TangleCard;
diff --git a/apps/tangle-dapp/components/TangleCard/index.ts b/apps/tangle-dapp/components/TangleCard/index.ts
deleted file mode 100644
index 2a15d49bd9..0000000000
--- a/apps/tangle-dapp/components/TangleCard/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import TangleCard from './TangleCard';
-
-export { default as TangleCard } from './TangleCard';
-
-export default TangleCard;
diff --git a/apps/tangle-dapp/components/TangleCard/types.ts b/apps/tangle-dapp/components/TangleCard/types.ts
deleted file mode 100644
index 2990fcdde0..0000000000
--- a/apps/tangle-dapp/components/TangleCard/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentProps } from 'react';
-
-export type TangleCardProps = ComponentProps<'div'>;
diff --git a/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx b/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx
index 3341114797..c519728e37 100644
--- a/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx
+++ b/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx
@@ -26,6 +26,7 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import cx from 'classnames';
 import React, {
   FC,
@@ -39,6 +40,7 @@ import React, {
 import { Validator } from '../../types';
 import calculateCommission from '../../utils/calculateCommission';
 import formatFractional from '../../utils/formatFractional';
+import pluralize from '../../utils/pluralize';
 import {
   getSortAddressOrIdentityFnc,
   sortBnValueForNomineeOrValidator,
@@ -57,13 +59,15 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
   setSelectedValidators,
   pageSize = 20,
 }) => {
-  const [searchValue, setSearchValue] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+
   const [rowSelection, setRowSelection] = useState<RowSelectionState>(
     defaultSelectedValidators.reduce((acc, address) => {
       acc[address] = true;
       return acc;
     }, {} as RowSelectionState),
   );
+
   const [sorting, setSorting] = useState<SortingState>([
     {
       id: 'totalStakeAmount',
@@ -77,7 +81,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
     SortingColumn<Validator>['toggleSorting'] | null
   >(null);
 
-  // Sync the selected validators with the parent state
+  // Sync the selected validators with the parent state.
   useEffect(() => {
     startTransition(() => {
       setSelectedValidators(new Set(Object.keys(rowSelection)));
@@ -124,7 +128,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           );
         },
         sortingFn: (rowA, rowB, columnId) =>
-          sortValidatorsBasedOnSortingFn(
+          sortValidatorsBy(
             rowA,
             rowB,
             columnId,
@@ -154,7 +158,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           </div>
         ),
         sortingFn: (rowA, rowB, columnId) =>
-          sortValidatorsBasedOnSortingFn(
+          sortValidatorsBy(
             rowA,
             rowB,
             columnId,
@@ -172,7 +176,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           </div>
         ),
         sortingFn: (rowA, rowB, columnId) =>
-          sortValidatorsBasedOnSortingFn(
+          sortValidatorsBy(
             rowA,
             rowB,
             columnId,
@@ -193,7 +197,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           </div>
         ),
         sortingFn: (rowA, rowB, columnId) =>
-          sortValidatorsBasedOnSortingFn(
+          sortValidatorsBy(
             rowA,
             rowB,
             columnId,
@@ -227,7 +231,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
         columnFilters: [
           {
             id: 'address',
-            value: searchValue,
+            value: searchQuery,
           },
         ],
       },
@@ -251,7 +255,7 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
       autoResetPageIndex: false,
       enableSortingRemoval: false,
     }),
-    [allValidators, columns, rowSelection, searchValue, sorting, pageSize],
+    [allValidators, columns, rowSelection, searchQuery, sorting, pageSize],
   );
 
   const table = useReactTable(tableProps);
@@ -263,8 +267,8 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
           id="search-validators-selection"
           rightIcon={<Search className="mr-2" />}
           placeholder="Search validators..."
-          value={searchValue}
-          onChange={(val) => setSearchValue(val)}
+          value={searchQuery}
+          onChange={setSearchQuery}
           className="mb-1"
           isControlled
         />
@@ -280,14 +284,13 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
             </div>
           ) : (
             <Table
+              variant={TableVariant.NESTED_IN_MODAL}
               tableClassName={cx('[&_tr]:[overflow-anchor:_none]')}
-              thClassName="z-10 border-t-0 py-3 sticky top-0"
-              trClassName="cursor-pointer"
-              tdClassName="py-2 border-t-0"
               paginationClassName="bg-mono-0 dark:bg-mono-180 p-2"
               tableWrapperClassName="max-h-[340px] overflow-y-scroll"
               tableProps={table}
               isPaginated
+              title={pluralize('validator', allValidators.length !== 1)}
             />
           ))}
 
@@ -306,21 +309,24 @@ const ValidatorSelectionTable: FC<ValidatorSelectionTableProps> = ({
   );
 };
 
-export default React.memo(ValidatorSelectionTable);
-
-function sortValidatorsBasedOnSortingFn(
+const sortValidatorsBy = (
   rowA: Row<Validator>,
   rowB: Row<Validator>,
   columnId: string,
   sortFn: SortingFn<Validator>,
   isDesc: boolean,
-) {
+) => {
   const rowASelected = rowA.getIsSelected();
   const rowBSelected = rowB.getIsSelected();
 
-  // Prioritize selected validators
-  if (rowASelected && !rowBSelected) return isDesc ? 1 : -1;
-  if (!rowASelected && rowBSelected) return isDesc ? -1 : 1;
+  // Prioritize selected validators by pinning them to the top.
+  if (rowASelected && !rowBSelected) {
+    return isDesc ? 1 : -1;
+  } else if (!rowASelected && rowBSelected) {
+    return isDesc ? -1 : 1;
+  }
 
   return sortFn(rowA, rowB, columnId);
-}
+};
+
+export default React.memo(ValidatorSelectionTable);
diff --git a/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx b/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx
index deeeda8266..dcf652bfcd 100644
--- a/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx
+++ b/apps/tangle-dapp/components/ValidatorTable/ValidatorTable.tsx
@@ -22,12 +22,14 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import Link from 'next/link';
 import { FC, useMemo, useState } from 'react';
 
 import { IS_PRODUCTION_ENV } from '../../constants/env';
 import { PagePath, Validator } from '../../types';
 import calculateCommission from '../../utils/calculateCommission';
+import pluralize from '../../utils/pluralize';
 import {
   getSortAddressOrIdentityFnc,
   sortBnValueForNomineeOrValidator,
@@ -195,15 +197,13 @@ const ValidatorTable: FC<ValidatorTableProps> = ({
   });
 
   return (
-    <div className="overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160">
-      <Table
-        thClassName="border-t-0 bg-mono-0"
-        trClassName={IS_PRODUCTION_ENV ? '' : 'cursor-pointer'}
-        paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6"
-        tableProps={table}
-        isPaginated
-      />
-    </div>
+    <Table
+      variant={TableVariant.DEFAULT}
+      trClassName={IS_PRODUCTION_ENV ? '' : 'cursor-pointer'}
+      tableProps={table}
+      isPaginated
+      title={pluralize('validator', data.length !== 1)}
+    />
   );
 };
 
diff --git a/apps/tangle-dapp/components/account/AccountSummaryCard.tsx b/apps/tangle-dapp/components/account/AccountSummaryCard.tsx
index fd759ef136..609cc43dd6 100644
--- a/apps/tangle-dapp/components/account/AccountSummaryCard.tsx
+++ b/apps/tangle-dapp/components/account/AccountSummaryCard.tsx
@@ -1,18 +1,19 @@
 'use client';
 
-import type { PropsOf } from '@webb-tools/webb-ui-components/types';
-import type { ElementRef } from 'react';
-import { forwardRef } from 'react';
+import { FC, useState } from 'react';
 
-import TangleCard from '../TangleCard';
+import TransferTxContainer from '../../containers/TransferTxContainer/TransferTxContainer';
+import GlassCardWithLogo from '../GlassCardWithLogo';
 import AccountAddress from './AccountAddress';
 import Actions from './Actions';
 import Balance from './Balance';
 
-const AccountSummaryCard = forwardRef<ElementRef<'div'>, PropsOf<'div'>>(
-  (props, ref) => {
-    return (
-      <TangleCard {...props} ref={ref}>
+const AccountSummaryCard: FC<{ className?: string }> = ({ className }) => {
+  const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
+
+  return (
+    <>
+      <GlassCardWithLogo className={className}>
         <div className="w-full space-y-5">
           <header>
             <AccountAddress />
@@ -20,13 +21,22 @@ const AccountSummaryCard = forwardRef<ElementRef<'div'>, PropsOf<'div'>>(
 
           <Balance />
 
-          <Actions />
+          <Actions openTransferModal={() => setIsTransferModalOpen(true)} />
         </div>
-      </TangleCard>
-    );
-  },
-);
+      </GlassCardWithLogo>
 
-AccountSummaryCard.displayName = 'AccountSummaryCard';
+      {/**
+       * Keep transfer modal outside to prevent it getting stuck
+       * within the card. Interestingly, the modal gets caught within
+       * the card due to the backdrop filter applied to the glass card
+       * due to some internal CSS logic regarding stacking contexts.
+       */}
+      <TransferTxContainer
+        isModalOpen={isTransferModalOpen}
+        setIsModalOpen={setIsTransferModalOpen}
+      />
+    </>
+  );
+};
 
 export default AccountSummaryCard;
diff --git a/apps/tangle-dapp/components/account/ActionItem.tsx b/apps/tangle-dapp/components/account/ActionItem.tsx
index 0b3fd3d539..41551789dd 100644
--- a/apps/tangle-dapp/components/account/ActionItem.tsx
+++ b/apps/tangle-dapp/components/account/ActionItem.tsx
@@ -51,7 +51,9 @@ const ActionItem: FC<ActionItemProps> = ({
       <div
         onClick={handleClick}
         className={twMerge(
-          'inline-flex mx-auto items-center justify-center relative p-2 rounded-lg hover:bg-mono-20 dark:hover:bg-mono-160 text-mono-200 dark:text-mono-0',
+          'inline-flex mx-auto items-center justify-center relative p-2 rounded-lg',
+          'hover:bg-mono-60 dark:hover:bg-mono-160',
+          'text-mono-200 dark:text-mono-0',
           isDisabled ? '!cursor-not-allowed' : 'cursor-pointer',
         )}
       >
diff --git a/apps/tangle-dapp/components/account/Actions.tsx b/apps/tangle-dapp/components/account/Actions.tsx
index a7f866a16e..802371db6d 100644
--- a/apps/tangle-dapp/components/account/Actions.tsx
+++ b/apps/tangle-dapp/components/account/Actions.tsx
@@ -1,16 +1,15 @@
 'use client';
 
 import {
-  ArrowLeftRightLineIcon,
   CoinsLineIcon,
   CoinsStackedLineIcon,
   GiftLineIcon,
   LockUnlockLineIcon,
+  SendPlanLineIcon,
 } from '@webb-tools/icons';
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
-import { FC, useState } from 'react';
+import { FC } from 'react';
 
-import TransferTxContainer from '../../containers/TransferTxContainer/TransferTxContainer';
 import useBalances from '../../data/balances/useBalances';
 import useAirdropEligibility from '../../data/claims/useAirdropEligibility';
 import usePayoutsAvailability from '../../data/payouts/usePayoutsAvailability';
@@ -23,9 +22,10 @@ import formatTangleBalance from '../../utils/formatTangleBalance';
 import ActionItem from './ActionItem';
 import WithdrawEvmBalanceAction from './WithdrawEvmBalanceAction';
 
-const Actions: FC = () => {
+const Actions: FC<{ openTransferModal: () => void }> = ({
+  openTransferModal,
+}) => {
   const { nativeTokenSymbol } = useNetworkStore();
-  const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
 
   const { execute: executeVestTx, status: vestTxStatus } = useVestTx();
   const { isEligible: isAirdropEligible } = useAirdropEligibility();
@@ -47,93 +47,82 @@ const Actions: FC = () => {
       : null;
 
   return (
-    <>
-      <div className="flex items-center justify-start gap-6 overflow-x-auto">
+    <div className="flex items-center justify-start gap-6 overflow-x-auto">
+      <ActionItem
+        label="Send"
+        Icon={SendPlanLineIcon}
+        onClick={openTransferModal}
+        // Disable while no account is connected, or when the active
+        // account has no funds.
+        isDisabled={
+          activeAccountAddress === null ||
+          transferableBalance === null ||
+          transferableBalance.isZero()
+        }
+      />
+
+      <ActionItem
+        label="Nominate"
+        internalHref={StaticSearchQueryPath.NominationsTable}
+        Icon={CoinsStackedLineIcon}
+      />
+
+      {isPayoutsAvailable && (
         <ActionItem
-          label="Transfer"
-          Icon={ArrowLeftRightLineIcon}
-          onClick={() => setIsTransferModalOpen(true)}
-          // Disable while no account is connected, or when the active
-          // account has no funds.
-          isDisabled={
-            activeAccountAddress === null ||
-            transferableBalance === null ||
-            transferableBalance.isZero()
-          }
+          hasNotificationDot
+          label="Payouts"
+          Icon={CoinsLineIcon}
+          internalHref={StaticSearchQueryPath.PayoutsTable}
+          tooltip="You have payouts available. Click here to visit the Payouts page."
         />
+      )}
 
+      {isAirdropEligible && (
         <ActionItem
-          label="Nominate"
-          internalHref={StaticSearchQueryPath.NominationsTable}
-          Icon={CoinsStackedLineIcon}
+          label="Claim Airdrop"
+          hasNotificationDot
+          Icon={GiftLineIcon}
+          internalHref={PagePath.CLAIM_AIRDROP}
+          tooltip={
+            <>
+              Congratulations, you are eligible for the Tangle Network airdrop!
+              Click here to visit the <strong>Claim Airdrop</strong> page.
+            </>
+          }
         />
+      )}
 
-        {isPayoutsAvailable && (
-          <ActionItem
-            hasNotificationDot
-            label="Payouts"
-            Icon={CoinsLineIcon}
-            internalHref={StaticSearchQueryPath.PayoutsTable}
-            tooltip="You have payouts available. Click here to visit the Payouts page."
-          />
-        )}
-
-        {isAirdropEligible && (
-          <ActionItem
-            label="Claim Airdrop"
-            hasNotificationDot
-            Icon={GiftLineIcon}
-            internalHref={PagePath.CLAIM_AIRDROP}
-            tooltip={
+      {/* This is a special case, so hide it for most users if they're not vesting */}
+      {isVesting && (
+        <ActionItem
+          Icon={LockUnlockLineIcon}
+          label="Vest"
+          onClick={executeVestTx !== null ? executeVestTx : undefined}
+          hasNotificationDot={hasClaimableVestingTokens}
+          isDisabled={
+            vestTxStatus === TxStatus.PROCESSING ||
+            !hasClaimableVestingTokens ||
+            executeVestTx === null
+          }
+          tooltip={
+            hasClaimableVestingTokens ? (
               <>
-                Congratulations, you are eligible for the Tangle Network
-                airdrop! Click here to visit the <strong>Claim Airdrop</strong>{' '}
-                page.
+                There are <strong>{formattedClaimableTokenAmount}</strong>{' '}
+                vested tokens that are ready to be claimed. Use this action to
+                release them.
               </>
-            }
-          />
-        )}
-
-        {/* This is a special case, so hide it for most users if they're not vesting */}
-        {isVesting && (
-          <ActionItem
-            Icon={LockUnlockLineIcon}
-            label="Vest"
-            onClick={executeVestTx !== null ? executeVestTx : undefined}
-            hasNotificationDot={hasClaimableVestingTokens}
-            isDisabled={
-              vestTxStatus === TxStatus.PROCESSING ||
-              !hasClaimableVestingTokens ||
-              executeVestTx === null
-            }
-            tooltip={
-              hasClaimableVestingTokens ? (
-                <>
-                  There are <strong>{formattedClaimableTokenAmount}</strong>{' '}
-                  vested tokens that are ready to be claimed. Use this action to
-                  release them.
-                </>
-              ) : (
-                <>
-                  There are vesting schedules in this account, but no tokens
-                  have vested yet.
-                </>
-              )
-            }
-          />
-        )}
-
-        <WithdrawEvmBalanceAction />
-      </div>
-
-      {/* TODO: Might be better to use a hook instead of doing it this way. */}
-      <div className="!m-0">
-        <TransferTxContainer
-          isModalOpen={isTransferModalOpen}
-          setIsModalOpen={setIsTransferModalOpen}
+            ) : (
+              <>
+                There are vesting schedules in this account, but no tokens have
+                vested yet.
+              </>
+            )
+          }
         />
-      </div>
-    </>
+      )}
+
+      <WithdrawEvmBalanceAction />
+    </div>
   );
 };
 
diff --git a/apps/tangle-dapp/components/account/Balance.tsx b/apps/tangle-dapp/components/account/Balance.tsx
index e024c08c73..7c068eb3bc 100644
--- a/apps/tangle-dapp/components/account/Balance.tsx
+++ b/apps/tangle-dapp/components/account/Balance.tsx
@@ -27,12 +27,12 @@ const Balance: FC = () => {
         <div className="flex items-center gap-2">
           <Typography
             variant="body1"
-            className="text-mono-120 dark:text-mono-40"
+            className="text-mono-120 dark:text-mono-80"
           >
             Transferable Balance
           </Typography>
 
-          <HiddenValueEye />
+          <HiddenValueEye className="hover:bg-mono-40" />
         </div>
 
         <div className="flex items-center">
diff --git a/apps/tangle-dapp/components/account/PillCard.tsx b/apps/tangle-dapp/components/account/PillCard.tsx
index 7d113e4824..7bb9a1710c 100644
--- a/apps/tangle-dapp/components/account/PillCard.tsx
+++ b/apps/tangle-dapp/components/account/PillCard.tsx
@@ -1,10 +1,13 @@
 import { IconBase } from '@webb-tools/icons/types';
-import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components';
+import {
+  Card,
+  CardVariant,
+  SkeletonLoader,
+  Typography,
+} from '@webb-tools/webb-ui-components';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import GlassCard from '../GlassCard/GlassCard';
-
 export type PillCardProps = {
   isFirst?: boolean;
   isLast?: boolean;
@@ -37,7 +40,8 @@ const PillCard: FC<PillCardProps> = ({
     : 'border-b md:border-r';
 
   return (
-    <GlassCard
+    <Card
+      variant={CardVariant.GLASS}
       className={twMerge('rounded-none', firstBorderClass, lastBorderClass)}
     >
       <div className="flex flex-col gap-2">
@@ -53,7 +57,7 @@ const PillCard: FC<PillCardProps> = ({
           {value !== null ? value : <SkeletonLoader size="lg" />}
         </Typography>
       </div>
-    </GlassCard>
+    </Card>
   );
 };
 
diff --git a/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx b/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx
index 966dc185d1..26f2e54587 100644
--- a/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx
+++ b/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx
@@ -119,6 +119,7 @@ const TooltipContent = ({
       <Typography variant="body2" fw="semibold" className="whitespace-nowrap">
         Era: {era}
       </Typography>
+
       <div className="flex items-center gap-1">
         <div
           className="w-2 h-2 rounded-full"
@@ -126,6 +127,7 @@ const TooltipContent = ({
             backgroundColor: ChartColor.LAVENDER,
           }}
         />
+
         <Typography variant="body2" className="whitespace-nowrap">
           Reward: {getRoundedAmountString(reward)} {suffix ?? ''}
         </Typography>
diff --git a/apps/tangle-dapp/components/index.ts b/apps/tangle-dapp/components/index.ts
index 77476c20cc..6cd3844f26 100644
--- a/apps/tangle-dapp/components/index.ts
+++ b/apps/tangle-dapp/components/index.ts
@@ -1,19 +1,16 @@
 export * from './BondedTokensBalanceInfo';
-export * from './Breadcrumbs';
 export { default as BridgeTxQueueDropdown } from './BridgeTxQueueDropdown';
-export { default as GlassCard } from './GlassCard';
+export { default as GlassCardWithLogo } from './GlassCardWithLogo';
 export * from './HeaderChip';
 export * from './KeyStatsItem';
 export * from './NominationsTable';
 export * from './NominatorStatsItem';
 export * from './PayoutTable';
 export * from './ServicesKeyMetricItem';
-export * from './ServiceTable';
 export * from './Sidebar';
 export * from './skeleton';
 export * from './TableStatus';
 export { default as TangleBigLogo } from './TangleBigLogo';
-export { default as TangleCard } from './TangleCard';
 export * from './UnbondingStatsItem';
 export * from './ValidatorSelectionTable';
 export * from './ValidatorTable';
diff --git a/apps/tangle-dapp/components/tableCells/HeaderCell.tsx b/apps/tangle-dapp/components/tableCells/HeaderCell.tsx
index 7d5e31e5a2..c312946ffa 100644
--- a/apps/tangle-dapp/components/tableCells/HeaderCell.tsx
+++ b/apps/tangle-dapp/components/tableCells/HeaderCell.tsx
@@ -11,21 +11,26 @@ const HeaderCell: FC<HeaderCellProps> = ({
   title,
   tooltip,
   className,
-  titleVariant = 'body1',
+  titleVariant = 'body2',
 }) => {
   return (
     <Typography
       variant={titleVariant}
-      fw="bold"
+      fw="normal"
       className={twMerge(
-        'whitespace-nowrap text-mono-140 dark:text-mono-40',
+        'whitespace-nowrap text-mono-140 dark:text-mono-100',
         'flex items-center gap-0.5',
         className,
       )}
     >
       {title}
 
-      {tooltip && <InfoIconWithTooltip content={tooltip} />}
+      {tooltip !== undefined && (
+        <InfoIconWithTooltip
+          className="fill-current dark:fill-current"
+          content={tooltip}
+        />
+      )}
     </Typography>
   );
 };
diff --git a/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx b/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx
index f585d7e0bb..66820e333f 100644
--- a/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx
+++ b/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx
@@ -9,6 +9,7 @@ import {
   DropdownBody,
 } from '@webb-tools/webb-ui-components/components/Dropdown';
 import { Table } from '@webb-tools/webb-ui-components/components/Table';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { getRoundedAmountString } from '@webb-tools/webb-ui-components/utils/getRoundedAmountString';
 import cx from 'classnames';
@@ -64,7 +65,9 @@ const VaultsDropdown: FC<{ vaultTokens: VaultToken[] }> = ({ vaultTokens }) => {
       </DropdownBasicButton>
 
       <DropdownBody isPortal className="mt-2 bg-mono-0 dark:bg-mono-200">
+        {/** TODO: Check styling after max depth issue is fixed.  */}
         <Table
+          variant={TableVariant.DEFAULT}
           tableProps={table}
           thClassName={cx('px-0 py-3 first:pl-5 last:pr-5')}
           tdClassName={cx('border-t-0 px-0 py-3 first:pl-5 last:pr-5')}
diff --git a/apps/tangle-dapp/components/tables/Operators/index.tsx b/apps/tangle-dapp/components/tables/Operators/index.tsx
index 5a520aa898..45f1baaebc 100644
--- a/apps/tangle-dapp/components/tables/Operators/index.tsx
+++ b/apps/tangle-dapp/components/tables/Operators/index.tsx
@@ -15,6 +15,7 @@ import {
   Table,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import Link from 'next/link';
 import { FC } from 'react';
@@ -23,9 +24,9 @@ import { twMerge } from 'tailwind-merge';
 import { PagePath, QueryParamKey } from '../../../types';
 import formatFractional from '../../../utils/formatFractional';
 import getTVLToDisplay from '../../../utils/getTVLToDisplay';
+import pluralize from '../../../utils/pluralize';
 import { getSortAddressOrIdentityFnc } from '../../../utils/table';
 import { TableStatus } from '../../TableStatus';
-import { sharedTableStatusClxs } from '../shared';
 import TableCellWrapper from '../TableCellWrapper';
 import type { OperatorData, Props } from './types';
 import VaultsDropdown from './VaultsDropdown';
@@ -197,11 +198,11 @@ const OperatorsTable: FC<Props> = ({
   if (isLoading) {
     return (
       <TableStatus
-        title="Loading operators..."
+        title="Loading Operators"
         description="Please wait while we load the operators."
         icon="🔄"
         {...loadingTableProps}
-        className={twMerge(sharedTableStatusClxs, loadingTableProps?.className)}
+        className={loadingTableProps?.className}
       />
     );
   }
@@ -209,48 +210,32 @@ const OperatorsTable: FC<Props> = ({
   if (data.length === 0) {
     return (
       <TableStatus
-        title="No operators found"
+        title="No Operators Found"
         description="It looks like there are no operators running at the moment."
         icon="⚙️"
         {...emptyTableProps}
-        className={twMerge(sharedTableStatusClxs, emptyTableProps?.className)}
+        className={emptyTableProps?.className}
       />
     );
   }
 
   return (
     <Table
-      title="Operators"
+      title={pluralize('operator', data.length !== 1)}
+      variant={TableVariant.GLASS_OUTER}
       isPaginated
       {...tableProps}
       tableProps={table}
-      className={twMerge(
-        'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160',
-        'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
-        'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
-        tableProps?.className,
-      )}
-      tableClassName={twMerge(
-        'border-separate border-spacing-y-3 pt-3',
-        tableProps?.tableClassName,
-      )}
-      thClassName={twMerge(
-        'py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0',
-        tableProps?.thClassName,
-      )}
-      tbodyClassName={twMerge('!bg-transparent', tableProps?.tbodyClassName)}
+      className={tableProps?.className}
+      tableClassName={tableProps?.tableClassName}
+      thClassName={tableProps?.thClassName}
+      tbodyClassName={tableProps?.tbodyClassName}
       trClassName={twMerge(
-        'group cursor-pointer overflow-hidden rounded-xl',
+        'group cursor-pointer overflow-hidden',
         tableProps?.trClassName,
       )}
-      tdClassName={twMerge(
-        'border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden',
-        tableProps?.tdClassName,
-      )}
-      paginationClassName={twMerge(
-        '!bg-transparent dark:!bg-transparent pl-6 border-t-0 -mt-2',
-        tableProps?.paginationClassName,
-      )}
+      tdClassName={tableProps?.tdClassName}
+      paginationClassName={tableProps?.paginationClassName}
     />
   );
 };
diff --git a/apps/tangle-dapp/components/tables/TableCellWrapper.tsx b/apps/tangle-dapp/components/tables/TableCellWrapper.tsx
index 4dd918bdcc..e05bd928b1 100644
--- a/apps/tangle-dapp/components/tables/TableCellWrapper.tsx
+++ b/apps/tangle-dapp/components/tables/TableCellWrapper.tsx
@@ -10,7 +10,7 @@ const TableCellWrapper: FC<
   return (
     <div
       className={twMerge(
-        'py-3 pr-3 flex h-[75px] items-center justify-between bg-mono-0 dark:bg-mono-190',
+        'py-3 pr-3 flex min-h-[75px] items-center justify-between',
         className,
       )}
     >
diff --git a/apps/tangle-dapp/components/tables/VaultAssets/index.tsx b/apps/tangle-dapp/components/tables/VaultAssets/index.tsx
index d21a19b1a8..1aaa5bb3e9 100644
--- a/apps/tangle-dapp/components/tables/VaultAssets/index.tsx
+++ b/apps/tangle-dapp/components/tables/VaultAssets/index.tsx
@@ -6,11 +6,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { Table } from '@webb-tools/webb-ui-components/components/Table';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { FC, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import formatTangleBalance from '../../../utils/formatTangleBalance';
 import getTVLToDisplay from '../../../utils/getTVLToDisplay';
+import pluralize from '../../../utils/pluralize';
 import type { Props, VaultAssetData } from './types';
 
 const columnHelper = createColumnHelper<VaultAssetData>();
@@ -37,7 +39,7 @@ const columns = [
   }),
 ];
 
-const VaultAssetsTable: FC<Props> = ({ data = [], isShown }) => {
+const VaultAssetsTable: FC<Props> = ({ data, isShown }) => {
   const table = useReactTable(
     useMemo(
       () =>
@@ -56,10 +58,12 @@ const VaultAssetsTable: FC<Props> = ({ data = [], isShown }) => {
     ),
   );
 
+  // TODO: Check styling after max depth issue is fixed.
   return (
     <Table
+      variant={TableVariant.DEFAULT}
       tableProps={table}
-      title="Assets"
+      title={pluralize('asset', data.length !== 1)}
       className={twMerge(
         'rounded-2xl overflow-hidden bg-mono-20 dark:bg-mono-200',
         isShown ? 'animate-slide-down' : 'animate-slide-up',
diff --git a/apps/tangle-dapp/components/tables/VaultAssets/types.ts b/apps/tangle-dapp/components/tables/VaultAssets/types.ts
index e8725a5a10..a402d4710f 100644
--- a/apps/tangle-dapp/components/tables/VaultAssets/types.ts
+++ b/apps/tangle-dapp/components/tables/VaultAssets/types.ts
@@ -8,5 +8,5 @@ export type VaultAssetData = {
 
 export type Props = {
   isShown?: boolean;
-  data?: VaultAssetData[];
+  data: VaultAssetData[];
 };
diff --git a/apps/tangle-dapp/components/tables/Vaults/index.tsx b/apps/tangle-dapp/components/tables/Vaults/index.tsx
index 8f3ffad3e5..f692ad37d0 100644
--- a/apps/tangle-dapp/components/tables/Vaults/index.tsx
+++ b/apps/tangle-dapp/components/tables/Vaults/index.tsx
@@ -12,6 +12,7 @@ import {
 import { ChevronUp } from '@webb-tools/icons/ChevronUp';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { Table } from '@webb-tools/webb-ui-components/components/Table';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import Link from 'next/link';
@@ -23,7 +24,6 @@ import formatFractional from '../../../utils/formatFractional';
 import getTVLToDisplay from '../../../utils/getTVLToDisplay';
 import LsTokenIcon from '../../LsTokenIcon';
 import { TableStatus } from '../../TableStatus';
-import { sharedTableStatusClxs } from '../shared';
 import TableCellWrapper from '../TableCellWrapper';
 import type { Props, VaultData } from './types';
 
@@ -164,11 +164,11 @@ const VaultsTable: FC<Props> = ({
   if (isLoading) {
     return (
       <TableStatus
-        title="Loading vaults..."
+        title="Loading Vaults"
         description="Please wait while we load the vaults."
         icon="🔄"
         {...loadingTableProps}
-        className={twMerge(sharedTableStatusClxs, loadingTableProps?.className)}
+        className={loadingTableProps?.className}
       />
     );
   }
@@ -176,25 +176,25 @@ const VaultsTable: FC<Props> = ({
   if (data.length === 0) {
     return (
       <TableStatus
-        title="No vaults found"
+        title="No Vaults Found"
         description="It looks like there are no vaults at the moment."
         icon="🔍"
         {...emptyTableProps}
-        className={twMerge(sharedTableStatusClxs, emptyTableProps?.className)}
+        className={emptyTableProps?.className}
       />
     );
   }
 
+  // TODO: Check styling after max depth issue is fixed.
   return (
     <Table
+      variant={TableVariant.GLASS_OUTER}
       title="Vaults"
       isPaginated
       {...tableProps}
       tableProps={table}
       className={twMerge(
         'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160',
-        'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
-        'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
         tableProps?.className,
       )}
       tableClassName={twMerge(
diff --git a/apps/tangle-dapp/components/tables/shared.ts b/apps/tangle-dapp/components/tables/shared.ts
deleted file mode 100644
index 73f0399fb0..0000000000
--- a/apps/tangle-dapp/components/tables/shared.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-
-export const sharedTableStatusClxs = twMerge(
-  'relative px-6 py-10 rounded-2xl !bg-[unset] border-mono-0 dark:border-mono-160',
-  'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
-  'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
-  'before:absolute before:inset-0 before:bg-cover before:bg-no-repeat before:opacity-30 before:pointer-events-none',
-  "before:bg-[url('/static/assets/blueprints/grid-bg.png')] dark:before:bg-[url('/static/assets/blueprints/grid-bg-dark.png')]",
-);
diff --git a/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx b/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx
index 6faf35f2fe..f9f97aa781 100644
--- a/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx
+++ b/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx
@@ -29,7 +29,7 @@ const BalanceAction: FC<{
   const iconButton = (
     <IconButton
       className={twMerge(
-        'bg-blue-10 hover:bg-blue-10 dark:bg-blue-120 dark:hover:bg-blue-110',
+        'bg-blue-10 hover:bg-blue-20 dark:bg-blue-120 dark:hover:bg-blue-110',
         isDisabledClass,
       )}
       disabled={isDisabled}
diff --git a/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx b/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx
index 685cf156db..479981d5dd 100644
--- a/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx
+++ b/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx
@@ -12,12 +12,13 @@ import useLocalStorage, {
   LocalStorageKey,
 } from '@webb-tools/tangle-shared-ui/hooks/useLocalStorage';
 import {
+  Card,
+  CardVariant,
   InfoIconWithTooltip,
   Typography,
 } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useEffect, useState } from 'react';
 
-import GlassCard from '../../components/GlassCard/GlassCard';
 import TangleTokenIcon from '../../components/TangleTokenIcon';
 import useBalances from '../../data/balances/useBalances';
 import useVestingInfo from '../../data/vesting/useVestingInfo';
@@ -84,7 +85,7 @@ const BalancesTableContainer: FC = () => {
 
   return (
     <>
-      <GlassCard className="overflow-x-auto">
+      <Card variant={CardVariant.GLASS} className="overflow-x-auto">
         <div className="flex flex-row min-w-[630px]">
           {/* Asset column */}
           <div className="flex flex-col justify-between w-full">
@@ -167,7 +168,7 @@ const BalancesTableContainer: FC = () => {
         </div>
 
         {hasLocks && !isDetailsCollapsed && <LockedBalanceDetails />}
-      </GlassCard>
+      </Card>
 
       <TransferTxContainer
         isModalOpen={isTransferModalOpen}
diff --git a/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx b/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx
index 4ca9cc38c0..09509ac4b4 100644
--- a/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx
+++ b/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx
@@ -1,3 +1,4 @@
+import { Card, CardVariant } from '@webb-tools/webb-ui-components';
 import { twMerge } from 'tailwind-merge';
 
 import ActiveValidatorsKeyStat from './ActiveValidatorsKeyStat';
@@ -9,20 +10,20 @@ import WaitingValidatorsKeyStat from './WaitingValidatorsKeyStat';
 
 export const KeyStatsContainer = () => {
   return (
-    <div
+    <Card
+      variant={CardVariant.GLASS}
       className={twMerge(
-        'w-full rounded-lg overflow-hidden',
-        'bg-glass dark:bg-glass_dark',
+        'w-full rounded-lg overflow-hidden p-0',
         'border-2 border-mono-0 dark:border-mono-160',
       )}
     >
       <div
         className={twMerge(
           'grid grid-cols-2 lg:grid-cols-3',
-          '[&>div]:border-r [&>div]:border-r-mono-40 [&>div]:dark:border-r-mono-160',
+          '[&>div]:border-r [&>div]:border-r-mono-80 [&>div]:dark:border-r-mono-160',
           '[&>div]:even:border-none lg:[&>div]:even:border-r',
           'lg:[&>div]:inline-block lg:[&>div]:basis-0 lg:[&>div]:grow',
-          '[&>div]:border-b [&>div]:border-b-mono-40 [&>div]:dark:border-b-mono-160',
+          '[&>div]:border-b [&>div]:border-b-mono-80 [&>div]:dark:border-b-mono-160',
         )}
       >
         <ValidatorCountKeyStat />
@@ -37,6 +38,6 @@ export const KeyStatsContainer = () => {
 
         <InflationPercentageKeyStat />
       </div>
-    </div>
+    </Card>
   );
 };
diff --git a/apps/tangle-dapp/containers/Layout/Layout.tsx b/apps/tangle-dapp/containers/Layout/Layout.tsx
index 78cef5aadf..1d0f7d9d28 100644
--- a/apps/tangle-dapp/containers/Layout/Layout.tsx
+++ b/apps/tangle-dapp/containers/Layout/Layout.tsx
@@ -12,12 +12,10 @@ import { useLayoutBgClassName } from '@webb-tools/webb-ui-components/next-utils'
 import { type FC, type PropsWithChildren } from 'react';
 
 import {
-  Breadcrumbs,
   BridgeTxQueueDropdown,
   MobileSidebar,
   Sidebar,
 } from '../../components';
-import OnboardingHelpButton from '../../components/OnboardingModal/OnboardingHelpButton';
 import { IS_PRODUCTION_ENV } from '../../constants/env';
 import ApiDevStatsContainer from '../DebugMetricsContainer';
 import WalletAndChainContainer from '../WalletAndChainContainer/WalletAndChainContainer';
@@ -55,21 +53,15 @@ const Layout: FC<PropsWithChildren<LayoutProps>> = ({
             <div className="flex items-center justify-between py-6">
               <div className="flex items-center space-x-4 lg:space-x-0">
                 <MobileSidebar />
-
-                <Breadcrumbs className="hidden md:block" />
               </div>
 
               <div className="flex items-center gap-2">
                 <WalletAndChainContainer />
 
                 <BridgeTxQueueDropdown />
-
-                <OnboardingHelpButton />
               </div>
             </div>
 
-            <Breadcrumbs className="md:hidden !mt-0" />
-
             {children}
           </div>
 
diff --git a/apps/tangle-dapp/containers/LsCreatePoolModal.tsx b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx
index b24924d31e..f7fbdb5953 100644
--- a/apps/tangle-dapp/containers/LsCreatePoolModal.tsx
+++ b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx
@@ -123,18 +123,6 @@ const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
         </ModalHeader>
 
         <ModalBody className="gap-4">
-          {/**
-           * In case that a testnet is selected, it's helpful to let the users
-           * know that the pool will be created on the testnet, and that
-           * it won't be accessible on other networks.
-           */}
-          {!isLiveNetwork && (
-            <Alert
-              type="info"
-              description={`This liquid staking pool will be created on ${lsNetwork.networkName} and will not be accessible on other networks.`}
-            />
-          )}
-
           <div className="flex flex-col sm:flex-row items-center gap-4 justify-stretch">
             <TextInput
               id="ls-create-pool-name"
@@ -195,6 +183,18 @@ const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
             setValue={setBouncerAddress}
             wrapperOverrides={{ isFullWidth: true }}
           />
+
+          {/**
+           * In case that a testnet is selected, it's helpful to let the users
+           * know that the pool will be created on the testnet, and that
+           * it won't be accessible on other networks.
+           */}
+          {!isLiveNetwork && (
+            <Alert
+              type="info"
+              description={`This liquid staking pool will be created on ${lsNetwork.networkName} and will not be accessible on other networks.`}
+            />
+          )}
         </ModalBody>
 
         <ModalFooterActions
diff --git a/apps/tangle-dapp/containers/LsMyProtocolsTable.tsx b/apps/tangle-dapp/containers/LsMyProtocolsTable.tsx
index 49abdef8e2..4aaa560a7c 100644
--- a/apps/tangle-dapp/containers/LsMyProtocolsTable.tsx
+++ b/apps/tangle-dapp/containers/LsMyProtocolsTable.tsx
@@ -14,6 +14,7 @@ import {
 } from '@tanstack/react-table';
 import { ChevronUp } from '@webb-tools/icons';
 import { Button, Table, Typography } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -145,7 +146,7 @@ const PROTOCOL_COLUMNS = [
                 row.getIsExpanded() && 'rotate-180',
               )}
             >
-              <ChevronUp className="!fill-current" />
+              <ChevronUp className="fill-current dark:fill-current" />
             </div>
           </Button>
         </div>
@@ -227,19 +228,10 @@ const LsMyProtocolsTable: FC = () => {
 
   return (
     <Table
+      variant={TableVariant.GLASS_OUTER}
       tableProps={table}
       getExpandedRowContent={getExpandedRowContent}
       onRowClick={onRowClick}
-      className={twMerge(
-        'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160',
-        'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
-        'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
-      )}
-      tableClassName="border-separate border-spacing-y-3 pt-3"
-      thClassName="py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0"
-      tbodyClassName="!bg-transparent"
-      trClassName="group cursor-pointer overflow-hidden rounded-xl"
-      tdClassName="border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden"
     />
   );
 };
diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx
index ccd8b4817c..1200508855 100644
--- a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx
+++ b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx
@@ -20,6 +20,7 @@ import {
   TooltipTrigger,
   Typography,
 } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
 import { FC, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -27,7 +28,6 @@ import { twMerge } from 'tailwind-merge';
 import { TableStatus } from '../../components';
 import PercentageCell from '../../components/tableCells/PercentageCell';
 import TokenAmountCell from '../../components/tableCells/TokenAmountCell';
-import { sharedTableStatusClxs } from '../../components/tables/shared';
 import { LsPool } from '../../constants/liquidStaking/types';
 import useLsSetStakingIntent from '../../data/liquidStaking/useLsSetStakingIntent';
 import { useLsStore } from '../../data/liquidStaking/useLsStore';
@@ -187,9 +187,8 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
   if (pools.length === 0) {
     return (
       <TableStatus
-        className={sharedTableStatusClxs}
-        title="No pools available yet"
-        description="Looks like there are currently no liquid staking pools available for this protocol. Try creating your own pool to get started!"
+        title="No Pools Available"
+        description="Looks like there are currently no liquid staking pools available for this protocol yet. Try creating your own pool to get started!"
         icon="🔍"
       />
     );
@@ -198,15 +197,10 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
   return (
     <div className="flex flex-col">
       <Table
+        variant={TableVariant.GLASS_INNER}
         tableProps={table}
         title="Assets"
-        className={twMerge(
-          'rounded-2xl overflow-hidden bg-mono-20 dark:bg-mono-200 px-3',
-          isShown ? 'animate-slide-down' : 'animate-slide-up',
-        )}
-        thClassName="py-3 !font-normal !bg-transparent border-t-0 border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160"
-        tbodyClassName="!bg-transparent"
-        tdClassName="!bg-inherit border-t-0"
+        className={twMerge(isShown ? 'animate-slide-down' : 'animate-slide-up')}
       />
 
       <Pagination
@@ -220,7 +214,7 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
         nextPage={table.nextPage}
         setPageIndex={table.setPageIndex}
         title={pluralize('pool', pools.length === 0 || pools.length > 1)}
-        className="py-5 border-t-0"
+        className="border-t-0"
       />
     </div>
   );
diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx
index 033c34e683..91275baf45 100644
--- a/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx
+++ b/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx
@@ -14,6 +14,7 @@ import {
 } from '@tanstack/react-table';
 import { ChevronUp } from '@webb-tools/icons';
 import { Button, Table, Typography } from '@webb-tools/webb-ui-components';
+import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -196,19 +197,10 @@ const LsProtocolsTable: FC = () => {
 
   return (
     <Table
+      variant={TableVariant.GLASS_OUTER}
       tableProps={table}
       getExpandedRowContent={getExpandedRowContent}
       onRowClick={onRowClick}
-      className={twMerge(
-        'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160',
-        'bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)]',
-        'dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)]',
-      )}
-      tableClassName="border-separate border-spacing-y-3 pt-3"
-      thClassName="py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0"
-      tbodyClassName="!bg-transparent"
-      trClassName="group cursor-pointer overflow-hidden rounded-xl"
-      tdClassName="border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden"
     />
   );
 };
diff --git a/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx b/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx
index 8c505fa5f5..aac9452ddf 100644
--- a/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx
+++ b/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx
@@ -184,12 +184,12 @@ const DelegationsPayoutsContainer: FC = () => {
           {!activeAccount ? (
             <TableStatus
               title="Wallet Not Connected"
-              description="Connect your wallet to view and manage your staking details."
+              description="Connect your wallet to view and manage your nominations."
               buttonText="Connect"
               buttonProps={{
                 isLoading: loading || isConnecting,
                 isDisabled: isMobile,
-                loadingText: isConnecting ? 'Connecting...' : 'Loading...',
+                loadingText: isConnecting ? 'Connecting' : 'Loading...',
                 onClick: () => toggleModal(true),
               }}
               icon="🔗"
@@ -219,12 +219,12 @@ const DelegationsPayoutsContainer: FC = () => {
           {!activeAccount ? (
             <TableStatus
               title="Wallet Not Connected"
-              description="Connect your wallet to view and manage your staking details."
+              description="Connect your wallet to view and request your nomination payouts."
               buttonText="Connect"
               buttonProps={{
                 isLoading: loading || isConnecting,
                 isDisabled: isMobile,
-                loadingText: isConnecting ? 'Connecting...' : 'Loading...',
+                loadingText: isConnecting ? 'Connecting' : undefined,
                 onClick: () => toggleModal(true),
               }}
               icon="🔗"
diff --git a/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx b/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx
index 45cdfe2476..e5f0a999f0 100644
--- a/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx
+++ b/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx
@@ -3,14 +3,18 @@
 import { BN_ZERO } from '@polkadot/util';
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
-import { Button, Divider } from '@webb-tools/webb-ui-components';
+import {
+  Button,
+  Card,
+  CardVariant,
+  Divider,
+} from '@webb-tools/webb-ui-components';
 import {
   SOCIAL_URLS_RECORD,
   TANGLE_DOCS_STAKING_URL,
   WEBB_DISCORD_CHANNEL_URL,
 } from '@webb-tools/webb-ui-components/constants';
 import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants';
-import cx from 'classnames';
 import Link from 'next/link';
 import { type FC, useCallback, useMemo, useState } from 'react';
 import React from 'react';
@@ -64,16 +68,13 @@ const NominatorStatsContainer: FC = () => {
     );
   }, [bondedAmountOpt, nativeTokenSymbol]);
 
+  const cardClass =
+    'w-full space-y-4 rounded-2xl overflow-hidden h-min-[204px] p-4';
+
   return (
     <div>
       <div className="flex flex-col w-full gap-4 md:flex-row">
-        <div
-          className={cx(
-            'w-full rounded-2xl overflow-hidden h-min-[204px] p-4',
-            'bg-glass dark:bg-glass_dark',
-            'border-2 border-mono-0 dark:border-mono-160',
-          )}
-        >
+        <Card variant={CardVariant.GLASS} className={cardClass}>
           <div className="grid grid-cols-2 gap-2">
             <NominatorStatsItem
               title="Free Balance"
@@ -134,15 +135,9 @@ const NominatorStatsContainer: FC = () => {
               </Button>
             )}
           </div>
-        </div>
+        </Card>
 
-        <div
-          className={cx(
-            'w-full rounded-2xl overflow-hidden h-min-[204px] p-4',
-            'bg-glass dark:bg-glass_dark',
-            'border-2 border-mono-0 dark:border-mono-160',
-          )}
-        >
+        <Card variant={CardVariant.GLASS} className={cardClass}>
           <div className="grid grid-cols-2 gap-2">
             <NominatorStatsItem
               title={`Total Staked ${nativeTokenSymbol}`}
@@ -224,7 +219,7 @@ const NominatorStatsContainer: FC = () => {
               </div>
             )}
           </div>
-        </div>
+        </Card>
       </div>
 
       <DelegateTxContainer
diff --git a/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx b/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx
deleted file mode 100644
index bfab89f7a4..0000000000
--- a/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-
-import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
-import { ArrowRightUp } from '@webb-tools/icons';
-import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore';
-import { ExplorerType } from '@webb-tools/tangle-shared-ui/types';
-import { Button, Typography } from '@webb-tools/webb-ui-components';
-import { TANGLE_DOCS_URL } from '@webb-tools/webb-ui-components/constants';
-import { FC, useMemo } from 'react';
-
-import GlassCard from '../../components/GlassCard/GlassCard';
-import useActiveAccountAddress from '../../hooks/useActiveAccountAddress';
-import useAgnosticAccountInfo from '../../hooks/useAgnosticAccountInfo';
-
-const RecentTxContainer: FC = () => {
-  const { network } = useNetworkStore();
-  const activeAccountAddress = useActiveAccountAddress();
-  const { isEvm } = useAgnosticAccountInfo();
-
-  const explorerUrl = useMemo(() => {
-    return isEvm
-      ? network.evmExplorerUrl
-      : (network.nativeExplorerUrl ?? network.polkadotJsDashboardUrl);
-  }, [
-    isEvm,
-    network.evmExplorerUrl,
-    network.nativeExplorerUrl,
-    network.polkadotJsDashboardUrl,
-  ]);
-
-  const accountExplorerUrl = useMemo(() => {
-    return activeAccountAddress && explorerUrl
-      ? makeExplorerUrl(
-          explorerUrl,
-          activeAccountAddress,
-          'address',
-          isEvm ? ExplorerType.EVM : ExplorerType.Substrate,
-        ).toString()
-      : undefined;
-  }, [activeAccountAddress, explorerUrl, isEvm]);
-
-  return (
-    <GlassCard className="flex flex-col gap-3 sm:gap-0">
-      <div className="flex justify-end">
-        <Button
-          size="sm"
-          variant="utility"
-          color="primary"
-          className="uppercase"
-          target="_blank"
-          href={accountExplorerUrl}
-          isDisabled={!accountExplorerUrl}
-          rightIcon={
-            <ArrowRightUp className="fill-current dark:fill-current" />
-          }
-        >
-          Open Explorer
-        </Button>
-      </div>
-
-      <div className="flex flex-col items-center justify-center h-full gap-5 text-center">
-        <Typography variant="body1" className="max-w-lg text-center">
-          Welcome to Tangle dApp &mdash; Your portal to managing Tangle Network
-          assets and upcoming AVS Blueprints in Tangle&apos;s modular restaking
-          infrastructure.
-        </Typography>
-
-        <Button href={TANGLE_DOCS_URL} target="_blank">
-          Learn More
-        </Button>
-      </div>
-    </GlassCard>
-  );
-};
-
-export default RecentTxContainer;
diff --git a/apps/tangle-dapp/containers/RecentTxContainer/index.ts b/apps/tangle-dapp/containers/RecentTxContainer/index.ts
deleted file mode 100644
index daea65d3d9..0000000000
--- a/apps/tangle-dapp/containers/RecentTxContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './RecentTxContainer';
diff --git a/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx b/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
index 4c3c94c3bb..fcf00f84c2 100644
--- a/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
+++ b/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
@@ -162,13 +162,13 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
         onCloseAutoFocus={reset}
       >
         <ModalHeader onClose={() => setIsModalOpen(false)}>
-          Transfer {nativeTokenSymbol} Tokens
+          Send {nativeTokenSymbol} Tokens
         </ModalHeader>
 
         <ModalBody className="overflow-clip">
           <Typography variant="body1" fw="normal">
             Quickly transfer your {nativeTokenSymbol} tokens to an account on
-            the Tangle Network. You can choose to send to either an EVM or a
+            the Tangle network. You can choose to send to either an EVM or a
             Substrate address.
           </Typography>
 
diff --git a/apps/tangle-dapp/containers/ValidatorTablesContainer/ValidatorTablesContainer.tsx b/apps/tangle-dapp/containers/ValidatorTablesContainer/ValidatorTablesContainer.tsx
index 7915c913bd..04438f3bd3 100644
--- a/apps/tangle-dapp/containers/ValidatorTablesContainer/ValidatorTablesContainer.tsx
+++ b/apps/tangle-dapp/containers/ValidatorTablesContainer/ValidatorTablesContainer.tsx
@@ -35,9 +35,9 @@ const ValidatorTablesContainer = () => {
       headerClassName="w-full"
       additionalActionsCmp={
         <Input
-          id="search-validators"
+          id="nomination-search-validators"
           rightIcon={<Search className="mr-2" />}
-          placeholder="Search validators..."
+          placeholder="Search validators by identity or address..."
           value={searchValue}
           onChange={(val) => setSearchValue(val)}
           isControlled
diff --git a/apps/tangle-dapp/data/balances/useBalances.ts b/apps/tangle-dapp/data/balances/useBalances.ts
index 3ea7991f59..8b20d7f0f5 100644
--- a/apps/tangle-dapp/data/balances/useBalances.ts
+++ b/apps/tangle-dapp/data/balances/useBalances.ts
@@ -6,7 +6,7 @@ import { useCallback } from 'react';
 import { map } from 'rxjs/operators';
 
 import useSubstrateAddress from '../../hooks/useSubstrateAddress';
-import { calculateTransferrableBalance } from '../../utils/polkadot/balance';
+import { calculateTransferableBalance } from '../../utils/polkadot/balance';
 
 export type AccountBalances = {
   /**
@@ -46,7 +46,7 @@ const useBalances = () => {
           // Note that without the null/undefined check, an error
           // reports that `num` is undefined for some reason. Might be
           // a gap in the type definitions of PolkadotJS.
-          const transferable = calculateTransferrableBalance(data);
+          const transferable = calculateTransferableBalance(data);
 
           return {
             free: data.free.toBn(),
diff --git a/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts b/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts
index a10968a14f..a553d789ac 100644
--- a/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts
@@ -1,4 +1,3 @@
-import { u8aToString } from '@polkadot/util';
 import { useMemo } from 'react';
 
 import { LsPoolDisplayName } from '../../constants/liquidStaking/types';
@@ -30,7 +29,7 @@ const useLsActivePoolDisplayName = (): ActivePoolDisplayNameReturn => {
       return null;
     }
 
-    return u8aToString(activePool[1].metadata.name);
+    return activePool[1].metadata.name.toUtf8();
   }, [activePool]);
 
   const displayName = useMemo<LsPoolDisplayName | null>(() => {
diff --git a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts
index 80458bafba..99dad0442a 100644
--- a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts
+++ b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts
@@ -1,4 +1,4 @@
-import { BN_ZERO, u8aToString } from '@polkadot/util';
+import { BN_ZERO } from '@polkadot/util';
 import { useMemo } from 'react';
 
 import { LsPool } from '../../constants/liquidStaking/types';
@@ -73,7 +73,7 @@ const useLsPools = (): Map<number, LsPool> | null | Error => {
         .map(([, address, account]) => [address, account] as const);
 
       const membersMap = new Map(membersKeyValuePairs);
-      const name = u8aToString(tanglePool.metadata.name);
+      const name = tanglePool.metadata.name.toUtf8();
 
       const pool: LsPool = {
         id: poolId,
diff --git a/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts b/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts
index 80cf4a4d19..3980f2a761 100644
--- a/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts
+++ b/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts
@@ -5,12 +5,6 @@ import { useObservableState } from 'observable-hooks';
 
 import useRestakeAssetIds from './useRestakeAssetIds';
 
-/**
- * Hook to retrieve the asset map for restaking.
- * @returns
- *  - `assetMap`: The asset map.
- *  - `assetMap$`: The observable for the asset map.
- */
 export default function useRestakeAssetMap() {
   const { apiRx } = usePolkadotApi();
   const { activeChain } = useWebContext();
diff --git a/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts b/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts
index 8a68a0b42e..43d2a9e40a 100644
--- a/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts
+++ b/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts
@@ -12,12 +12,6 @@ import { map, of, switchMap } from 'rxjs';
 import useSubstrateAddress from '../../hooks/useSubstrateAddress';
 import type { DelegatorInfo } from '../../types/restake';
 
-/**
- * Hook to retrieve the delegator info for restaking.
- * @returns
- *  - `delegatorInfo`: The delegator info.
- *  - `delegatorInfo$`: The observable for the delegator info.
- */
 export default function useRestakeDelegatorInfo() {
   const activeAddress = useSubstrateAddress();
 
@@ -132,9 +126,7 @@ function getStatus(
 ): DelegatorInfo['status'] {
   if (status.isActive) {
     return 'Active';
-  }
-
-  if (status.isLeavingScheduled) {
+  } else if (status.isLeavingScheduled) {
     return {
       LeavingScheduled: status.asLeavingScheduled.toNumber(),
     };
diff --git a/apps/tangle-dapp/utils/polkadot/balance.ts b/apps/tangle-dapp/utils/polkadot/balance.ts
index 2d043f2299..66cd8d5b6e 100644
--- a/apps/tangle-dapp/utils/polkadot/balance.ts
+++ b/apps/tangle-dapp/utils/polkadot/balance.ts
@@ -2,7 +2,7 @@ import { PalletBalancesAccountData } from '@polkadot/types/lookup';
 import { BN, BN_ZERO, bnMax } from '@polkadot/util';
 
 // TODO: Update calculation with provided definition from Polkadot docs: https://wiki.polkadot.network/docs/learn-account-balances
-export function calculateTransferrableBalance(
+export function calculateTransferableBalance(
   accInfo: PalletBalancesAccountData,
 ) {
   const maxFrozen = bnMax(
diff --git a/libs/icons/src/HomeFillIcon.tsx b/libs/icons/src/HomeFillIcon.tsx
new file mode 100644
index 0000000000..1315918318
--- /dev/null
+++ b/libs/icons/src/HomeFillIcon.tsx
@@ -0,0 +1,10 @@
+import { createIcon } from './create-icon';
+import { IconBase } from './types';
+
+export const HomeFillIcon = (props: IconBase) => {
+  return createIcon({
+    ...props,
+    d: 'M20 20.0001C20 20.5524 19.5523 21.0001 19 21.0001H5C4.44772 21.0001 4 20.5524 4 20.0001V11.0001H1L11.3273 1.61162C11.7087 1.26488 12.2913 1.26488 12.6727 1.61162L23 11.0001H20V20.0001Z',
+    displayName: 'HomeFillIcon',
+  });
+};
diff --git a/libs/icons/src/Spinner.tsx b/libs/icons/src/Spinner.tsx
index 005319bbfc..19d6eb9ad0 100644
--- a/libs/icons/src/Spinner.tsx
+++ b/libs/icons/src/Spinner.tsx
@@ -5,29 +5,21 @@ import { createIcon } from './create-icon';
 import { IconBase } from './types';
 
 export const Spinner = React.memo<IconBase>((props) => {
-  // Spin animation attach to className
-  const className = twMerge(
-    props.className,
-    'animate-spin !fill-transparent !stroke-none',
-  );
-
   return createIcon({
     ...props,
-    className,
-    path: [
-      <path
-        d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1Z"
-        stroke="#D5E6FF"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />,
+    className: twMerge(
+      props.className,
+      'animate-spin !fill-transparent !stroke-none',
+    ),
+    style: { animationDuration: '0.8s' },
+    path: (
       <path
-        d="M10 1C14.9706 1 19 5.02944 19 10"
-        stroke="#4E8CDF"
-        strokeWidth="2"
+        d="M10 2C14.4183 2 18 5.58172 18 10"
+        stroke="#5953F9"
+        strokeWidth="4"
         strokeLinecap="round"
-      />,
-    ],
+      />
+    ),
     displayName: 'Spinner',
     viewBox: '0 0 20 20',
   });
diff --git a/libs/icons/src/StatusIndicator/StatusIndicator.tsx b/libs/icons/src/StatusIndicator/StatusIndicator.tsx
index 4a05f72e05..8f62ad6a7e 100644
--- a/libs/icons/src/StatusIndicator/StatusIndicator.tsx
+++ b/libs/icons/src/StatusIndicator/StatusIndicator.tsx
@@ -29,7 +29,7 @@ const classes: {
 
 const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(
   ({ animated, variant = 'info', size = 12, ...props }, ref) => {
-    // We use haft size to make sure the component is corectly centered
+    // We use haft size to make sure the component is correctly centered.
     const haftSize = size / 2;
 
     return (
diff --git a/libs/icons/src/index.ts b/libs/icons/src/index.ts
index 93d67aa0e4..bfae83d4f2 100644
--- a/libs/icons/src/index.ts
+++ b/libs/icons/src/index.ts
@@ -154,6 +154,7 @@ export { default as WalletPayIcon } from './WalletPayIcon';
 export * from './WaterDropletIcon';
 export { default as WebbLogoIcon } from './WebbLogoIcon';
 export * from './YouTubeFill';
+export * from './HomeFillIcon';
 
 // Wallet icons
 export * from './wallets';
diff --git a/libs/icons/src/useDynamicSVGImport.tsx b/libs/icons/src/useDynamicSVGImport.tsx
index aa5e986b19..2bbbfcafd4 100644
--- a/libs/icons/src/useDynamicSVGImport.tsx
+++ b/libs/icons/src/useDynamicSVGImport.tsx
@@ -1,21 +1,13 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-/**
- * Options for `useDynamicSVGImport` to import cryptocurrency icon dynamically
- */
 export interface DynamicSVGImportOptions {
-  /**
-   * A optional function which is called when finish loading SVG icon
-   */
   onCompleted?: (
     name: string,
     SvgIcon: React.FC<React.SVGProps<SVGElement>> | undefined,
   ) => void;
-  /**
-   * An optional function for handle error when loading SVG icon
-   */
+
   onError?: React.ReactEventHandler<SVGElement>;
 
   /**
@@ -38,33 +30,34 @@ export function useDynamicSVGImport(
   const [importedIcon, setImportedIcon] = useState<
     React.ReactElement<React.SVGProps<SVGElement>, 'svg'> | undefined
   >();
+
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error>();
 
   const { onCompleted, onError } = options;
 
-  const _name = useMemo(
-    () =>
-      typeof name === 'string' ? name.trim().toLowerCase() : 'placeholder',
-    [name],
-  );
+  const name_ =
+    typeof name === 'string' ? name.trim().toLowerCase() : 'placeholder';
 
-  const type = useMemo(() => options.type ?? 'token', [options]);
+  const type = options.type ?? 'token';
 
   useEffect(() => {
     setLoading(true);
+
     const importIcon = async (): Promise<void> => {
       try {
-        const mod = await getIcon(type, _name);
+        const mod = await getIcon(type, name_);
         const Icon = mod.default;
+
         setImportedIcon(<Icon />);
-        onCompleted?.(_name, Icon);
+        onCompleted?.(name_, Icon);
       } catch (err) {
         if ((err as any).message.includes('Cannot find module')) {
           const mod = await getDefaultIcon(type);
           const Icon = mod.default;
+
           setImportedIcon(<Icon />);
-          onCompleted?.(_name, Icon);
+          onCompleted?.(name_, Icon);
         } else {
           console.error('IMPORT ERROR', (err as any).message);
           onError?.(err as any);
@@ -74,8 +67,9 @@ export function useDynamicSVGImport(
         setLoading(false);
       }
     };
+
     importIcon();
-  }, [_name, onCompleted, onError, type]);
+  }, [name_, onCompleted, onError, type]);
 
   return { error, loading, svgElement: importedIcon };
 }
diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx
index d40953d542..1d6b0fb482 100644
--- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx
+++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -2,11 +2,7 @@
 
 import { useConnectWallet } from '@webb-tools/api-provider-environment';
 import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
-import { ComputerIcon } from '@webb-tools/icons/ComputerIcon';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
-import { ConnectWalletMobileButton } from '@webb-tools/webb-ui-components/components/ConnectWalletMobileButton';
-import { useCheckMobile } from '@webb-tools/webb-ui-components/hooks/useCheckMobile';
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import tryEncodeSubstrateAddress from '@webb-tools/webb-ui-components/utils/tryEncodeSubstrateAddress';
 import { useMemo } from 'react';
 import useNetworkStore from '../../context/useNetworkStore';
@@ -20,7 +16,6 @@ const ConnectWalletButton = () => {
 
   const { network } = useNetworkStore();
   const { toggleModal } = useConnectWallet();
-  const { isMobile } = useCheckMobile();
 
   const accountAddress = useMemo(
     () => tryEncodeSubstrateAddress(activeAccount?.address, network.ss58Prefix),
@@ -34,28 +29,14 @@ const ConnectWalletButton = () => {
     <>
       <div>
         {!isReady || !accountAddress ? (
-          isMobile ? (
-            <ConnectWalletMobileButton>
-              <div className="flex flex-col items-center justify-center gap-4 py-9">
-                <ComputerIcon size="xl" className="mx-auto" />
-
-                <Typography variant="body1" className="text-center">
-                  For the best staking experience, we recommend using our
-                  desktop interface for full-feature interface and enhanced
-                  controls.
-                </Typography>
-              </div>
-            </ConnectWalletMobileButton>
-          ) : (
-            <Button
-              isLoading={isConnecting || loading}
-              loadingText={isConnecting ? 'Connecting...' : 'Loading...'}
-              onClick={() => toggleModal(true)}
-              className="flex items-center justify-center px-6"
-            >
-              Connect
-            </Button>
-          )
+          <Button
+            isLoading={isConnecting || loading}
+            loadingText={isConnecting ? 'Connecting' : undefined}
+            onClick={() => toggleModal(true)}
+            className="flex items-center justify-center px-6"
+          >
+            Connect
+          </Button>
         ) : (
           <div className="relative">
             <WalletDropdown
diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx
index 237166e455..b8d359934d 100644
--- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx
+++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx
@@ -98,6 +98,7 @@ const WalletDropdown: FC<{
               </div>
             </div>
           </div>
+
           <div className="flex items-center md:justify-end space-x-2.5">
             <SwitchAccountButton />
 
diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx
index 5b909edade..38ba67a56b 100644
--- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx
+++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx
@@ -61,7 +61,7 @@ const WalletModalContainer = () => {
       notificationApi={notificationApi}
       apiConfig={apiConfig}
       targetTypedChainIds={targetTypedChainIds}
-      contentDefaultText="Connect your EVM or Substrate wallet to interact on the Tangle Network"
+      contentDefaultText="Connect your EVM or Substrate wallet to interact with the Tangle Network."
     />
   );
 };
diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx
index 9db5f87e2b..2428d12aae 100644
--- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx
+++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx
@@ -1,4 +1,4 @@
-import { ChainIcon } from '@webb-tools/icons';
+import { ChainIcon, StatusIndicator } from '@webb-tools/icons';
 import {
   DropdownMenuItem,
   InfoIconWithTooltip,
@@ -103,14 +103,22 @@ const NetworkOption: FC<NetworkOptionProps> = ({
     <DropdownMenuItem
       leftIcon={<ChainIcon size="lg" name={name} />}
       onClick={handleClick}
-      className="w-full py-3"
-      isActive={isSelected}
+      className="flex justify-between w-full py-3"
     >
-      <div className="flex items-center gap-2">
-        <Typography variant="body1" fw="semibold" className="dark:text-mono-0">
-          {name}
-        </Typography>
-        {tooltip !== undefined && <InfoIconWithTooltip content={tooltip} />}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Typography
+            variant="body1"
+            fw="semibold"
+            className="dark:text-mono-0"
+          >
+            {name}
+          </Typography>
+
+          {tooltip !== undefined && <InfoIconWithTooltip content={tooltip} />}
+        </div>
+
+        {isSelected && <StatusIndicator variant="success" />}
       </div>
     </DropdownMenuItem>
   );
diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx
index bbf34c7673..d21e909ad7 100644
--- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx
+++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx
@@ -23,13 +23,7 @@ import useNetworkSwitcher from '../../hooks/useNetworkSwitcher';
 import createCustomNetwork from '../../utils/createCustomNetwork';
 import { NetworkSelectorDropdown } from './NetworkSelectorDropdown';
 
-export type NetworkSelectionButtonProps = {
-  isNetworkSwitchDisabled?: boolean;
-};
-
-const NetworkSelectionButton: FC<NetworkSelectionButtonProps> = ({
-  isNetworkSwitchDisabled = false,
-}) => {
+const NetworkSelectionButton: FC = () => {
   const { activeChain, activeWallet, isConnecting, loading, switchChain } =
     useWebContext();
 
@@ -45,9 +39,9 @@ const NetworkSelectionButton: FC<NetworkSelectionButtonProps> = ({
 
   const networkName = useMemo(() => {
     if (isConnecting) {
-      return 'Connecting...';
+      return 'Connecting';
     } else if (loading) {
-      return 'Loading...';
+      return 'Loading';
     }
 
     return network?.name ?? 'Unknown Network';
@@ -78,26 +72,6 @@ const NetworkSelectionButton: FC<NetworkSelectionButtonProps> = ({
     switchChain(targetChain, activeWallet);
   }, [activeWallet, network.evmChainId, switchChain]);
 
-  if (isNetworkSwitchDisabled) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Dropdown>
-            <TriggerButton
-              className="opacity-60 cursor-not-allowed hover:!bg-none dark:hover:!bg-none"
-              networkName={networkName}
-              isLocked
-            />
-          </Dropdown>
-        </TooltipTrigger>
-
-        <TooltipBody side="bottom">
-          Network can&apos;t be changed while you&apos;re in this page.
-        </TooltipBody>
-      </Tooltip>
-    );
-  }
-
   return (
     <div className="flex items-center gap-1">
       {isWrongEvmNetwork && (
@@ -106,10 +80,9 @@ const NetworkSelectionButton: FC<NetworkSelectionButtonProps> = ({
             <div
               className={twMerge(
                 'cursor-pointer p-2 rounded-full',
-                'bg-mono-0/10 border-mono-60',
-                'dark:bg-mono-0/5 dark:border-mono-140',
-                'hover:bg-mono-0/30',
-                'dark:hover:bg-mono-0/10',
+                'bg-mono-0/10 dark:bg-mono-0/5',
+                'hover:bg-mono-0/30 dark:hover:bg-mono-0/10',
+                'border-mono-60 dark:border-mono-140',
               )}
               onClick={switchToCorrectEvmChain}
             >
@@ -159,12 +132,10 @@ const TriggerButton: FC<TriggerButtonProps> = ({
       type="button"
       disabled={isLoading}
       className={twMerge(
-        'rounded-lg border-2 p-2',
-        'bg-mono-0/10 border-mono-60',
-        'hover:bg-mono-0/30',
-        'dark:bg-mono-0/5 dark:border-mono-140',
-        'dark:hover:bg-mono-0/10',
-        'flex items-center gap-2',
+        'flex items-center gap-2 rounded-lg p-2',
+        'bg-transparent dark:bg-transparent',
+        'hover:bg-mono-100/10 dark:hover:bg-mono-0/10',
+        'border-2 border-mono-60 dark:border-mono-140',
         className,
       )}
     >
diff --git a/libs/webb-ui-components/src/components/Card/Card.tsx b/libs/webb-ui-components/src/components/Card/Card.tsx
index 4a9387cf18..1d89baaf5f 100644
--- a/libs/webb-ui-components/src/components/Card/Card.tsx
+++ b/libs/webb-ui-components/src/components/Card/Card.tsx
@@ -1,10 +1,28 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
-import { CardProps } from './types';
+import { WebbComponentBase } from '../../types';
+
+export enum CardVariant {
+  DEFAULT,
+  GLASS,
+}
+
+export type CardProps = WebbComponentBase & {
+  variant?: CardVariant;
+  withShadow?: boolean;
+};
+
+const getVariantClass = (variant: CardVariant) => {
+  switch (variant) {
+    case CardVariant.GLASS:
+      return 'p-6 rounded-2xl border border-mono-0 dark:border-mono-160 bg-glass dark:bg-glass_dark backdrop-blur-2xl';
+    case CardVariant.DEFAULT:
+      return '';
+  }
+};
 
 /**
- * The `Card` component
- * Sets up styles, and spacing vertically between `block` components
+ * Sets up styles, and spacing vertically between `block` components.
  *
  * @example
  *
@@ -12,8 +30,10 @@ import { CardProps } from './types';
  *  <Card>
  *    ...
  *  </Card>
+ *
  * <Card>
  *   <TitleWithInfo title='Token Selector' variant='h4' />
+ *
  *   <div className='flex items-center space-x-4'>
  *     <TokenSelector>ETH</TokenSelector>
  *     <TokenSelector>DOT</TokenSelector>
@@ -23,18 +43,29 @@ import { CardProps } from './types';
  * ```
  */
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ children, className, ...props }, ref) => {
-    const cardClsx = useMemo(
-      () =>
-        twMerge(
-          'flex flex-col w-full p-4 space-y-6 rounded-lg bg-mono-0 dark:bg-mono-180',
-          className,
-        ),
-      [className],
-    );
-
+  (
+    {
+      children,
+      className,
+      withShadow = false,
+      variant = CardVariant.DEFAULT,
+      ...props
+    },
+    ref,
+  ) => {
     return (
-      <div {...props} className={cardClsx} ref={ref}>
+      <div
+        {...props}
+        className={twMerge(
+          'p-6 rounded-xl',
+          'bg-mono-0 dark:bg-mono-200',
+          'border border-mono-60 dark:border-mono-170',
+          withShadow && 'shadow-webb-lg dark:shadow-webb-lg-dark',
+          getVariantClass(variant),
+          className,
+        )}
+        ref={ref}
+      >
         {children}
       </div>
     );
diff --git a/libs/webb-ui-components/src/components/Card/types.ts b/libs/webb-ui-components/src/components/Card/types.ts
deleted file mode 100644
index c91a424860..0000000000
--- a/libs/webb-ui-components/src/components/Card/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { WebbComponentBase } from '../../types';
-
-/**
- * The `Card` props
- */
-export type CardProps = WebbComponentBase;
diff --git a/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx b/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx
index eb686c3a61..a1468c5f53 100644
--- a/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx
+++ b/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx
@@ -3,11 +3,14 @@ import { type FC } from 'react';
 import { IconButton } from '../buttons';
 import { useHiddenValue } from '../../hooks';
 
-export const HiddenValueEye: FC = () => {
+export const HiddenValueEye: FC<{ className?: string }> = ({ className }) => {
   const [isHiddenValue, setIsHiddenValue] = useHiddenValue();
 
   return (
-    <IconButton onClick={() => setIsHiddenValue((prev) => !prev)}>
+    <IconButton
+      className={className}
+      onClick={() => setIsHiddenValue((prev) => !prev)}
+    >
       {isHiddenValue ? <EyeClosedLine /> : <EyeLineIcon />}
     </IconButton>
   );
diff --git a/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx b/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx
index 5203b69ca1..c8f8610cbd 100644
--- a/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx
+++ b/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx
@@ -25,7 +25,7 @@ const IconWithTooltip: FC<IconWithTooltipProp> = ({
       </TooltipTrigger>
 
       <TooltipBody {...overrideTooltipBodyProps}>
-        <Typography variant="body3" className="text-center break-normal">
+        <Typography variant="body2" className="text-center break-normal">
           {content}
         </Typography>
       </TooltipBody>
diff --git a/libs/webb-ui-components/src/components/Input/Input.tsx b/libs/webb-ui-components/src/components/Input/Input.tsx
index af3e30c4ef..d0df6855d7 100644
--- a/libs/webb-ui-components/src/components/Input/Input.tsx
+++ b/libs/webb-ui-components/src/components/Input/Input.tsx
@@ -68,13 +68,13 @@ export const Input: React.FC<InputProps> = (props) => {
   const [value, setValue] = useState('');
   const [cursor, setCursor] = useState<number | null>(null);
 
-  const controlledValue = useMemo(
-    () => (isControlled ? propValue : value),
-    [isControlled, propValue, value],
-  );
+  const controlledValue = isControlled ? propValue : value;
 
   useEffect(() => {
-    if (!debounceTime) return;
+    if (!debounceTime) {
+      return;
+    }
+
     const timeout = setTimeout(() => {
       onChange?.(controlledValue ?? '');
     }, debounceTime);
@@ -86,18 +86,19 @@ export const Input: React.FC<InputProps> = (props) => {
     inputRef?.current?.setSelectionRange(cursor, cursor);
   }, [inputRef, cursor, controlledValue]);
 
-  // Override the size of left icon prop to 'md'
+  // Override the size of left icon prop to 'md'.
   const leftIcon = useMemo(() => {
     if (!leftIconProp) {
       return;
     }
+
     return React.cloneElement(leftIconProp, {
       ...leftIconProp.props,
       size: 'md',
     });
   }, [leftIconProp]);
 
-  // Override the size of right icon prop to 'md'
+  // Override the size of right icon prop to 'md'.
   const rightIcon = useMemo(() => {
     if (!rightIconProp) {
       return;
@@ -108,22 +109,16 @@ export const Input: React.FC<InputProps> = (props) => {
     });
   }, [rightIconProp]);
 
-  const isInvalid = useMemo(
-    () => isInvalidProp || errorMessage,
-    [isInvalidProp, errorMessage],
-  );
+  const isInvalid = isInvalidProp || errorMessage;
 
-  const paddingX = useMemo(
-    () =>
-      leftIconProp && rightIconProp
-        ? ('px-8' as const)
-        : leftIconProp
-          ? ('pl-8 pr-4' as const)
-          : rightIconProp
-            ? ('pl-4 pr-8' as const)
-            : ('px-4' as const),
-    [leftIconProp, rightIconProp],
-  );
+  const paddingX =
+    leftIconProp && rightIconProp
+      ? ('px-8' as const)
+      : leftIconProp
+        ? ('pl-8 pr-4' as const)
+        : rightIconProp
+          ? ('pl-4 pr-8' as const)
+          : ('px-4' as const);
 
   const inputClsxBase = useMemo(
     () =>
@@ -136,20 +131,14 @@ export const Input: React.FC<InputProps> = (props) => {
       ),
     [isInvalid, paddingX],
   );
-  const inputClsxHover = useMemo(
-    () => 'hover:border-blue-40 dark:hover:border-blue-70',
-    [],
-  );
-  const inputClsxFocus = useMemo(
-    () =>
-      'focus:bg-blue-0 focus:border-blue-40 dark:focus:bg-blue-120 dark:focus:border-blue-70',
-    [],
-  );
-  const inputClsxDisabled = useMemo(
-    () =>
-      'disabled:text-mono-100 dark:disabled:text-mono-120 disabled:bg-mono-40 dark:disabled:bg-mono-160 disabled:cursor-not-allowed disabled:hover:border-mono-80 dark:disabled:hover:border-mono-120',
-    [],
-  );
+
+  const inputClsxHover = 'hover:border-blue-40 dark:hover:border-blue-70';
+
+  const inputClsxFocus =
+    'focus:bg-blue-0 focus:border-blue-40 dark:focus:bg-blue-120 dark:focus:border-blue-70';
+
+  const inputClsxDisabled =
+    'disabled:text-mono-100 dark:disabled:text-mono-120 disabled:bg-mono-40 dark:disabled:bg-mono-160 disabled:cursor-not-allowed disabled:hover:border-mono-80 dark:disabled:hover:border-mono-120';
 
   const mergedInputClsx = useMemo(
     () =>
@@ -178,15 +167,9 @@ export const Input: React.FC<InputProps> = (props) => {
     ],
   );
 
-  const iconClsx = useMemo(
-    () =>
-      cx(
-        twMerge(
-          'text-mono-140 dark:text-mono-40',
-          isDisabled ? 'text-mono-100 dark:text-mono-120' : '',
-        ),
-      ),
-    [isDisabled],
+  const iconClsx = twMerge(
+    'text-mono-140 dark:text-mono-40',
+    isDisabled && 'text-mono-100 dark:text-mono-120',
   );
 
   return (
@@ -225,7 +208,7 @@ export const Input: React.FC<InputProps> = (props) => {
         )}
       </div>
 
-      {errorMessage && (
+      {errorMessage !== undefined && (
         <Typography
           component="p"
           variant="body4"
diff --git a/libs/webb-ui-components/src/components/InputField/InputField.tsx b/libs/webb-ui-components/src/components/InputField/InputField.tsx
index ee0cbe8403..e4d5a2ce27 100644
--- a/libs/webb-ui-components/src/components/InputField/InputField.tsx
+++ b/libs/webb-ui-components/src/components/InputField/InputField.tsx
@@ -33,7 +33,7 @@ const InputFieldRoot = forwardRef<React.ElementRef<'div'>, InputFieldRootProps>(
           ref={forwardedRef}
           className={twMerge(
             'group flex items-center justify-between gap-1 px-4 py-2 w-full h-[74px] rounded-lg',
-            'bg-mono-20 dark:bg-mono-160',
+            'bg-mono-20 dark:bg-mono-170',
             'outline outline-1 outline-offset-1 outline-transparent',
             cx({
               'outline-red-40 dark:outline-red-90': error,
diff --git a/libs/webb-ui-components/src/components/ListCard/ListItem.tsx b/libs/webb-ui-components/src/components/ListCard/ListItem.tsx
index f9a0b52d00..55ac0df21d 100644
--- a/libs/webb-ui-components/src/components/ListCard/ListItem.tsx
+++ b/libs/webb-ui-components/src/components/ListCard/ListItem.tsx
@@ -12,10 +12,8 @@ export const ListItem = forwardRef<
     <li
       {...props}
       className={twMerge(
-        'group max-w-lg px-[34px] py-2',
+        'group px-8 py-2',
         'flex items-center justify-between',
-        'bg-mono-0 dark:bg-mono-190',
-
         cx({
           'hover:bg-blue-0 dark:hover:bg-mono-170': !isDisabled,
           'opacity-50': isDisabled,
diff --git a/libs/webb-ui-components/src/components/Modal/Modal.tsx b/libs/webb-ui-components/src/components/Modal/Modal.tsx
index 175f1a1f32..7dfe5f18ee 100644
--- a/libs/webb-ui-components/src/components/Modal/Modal.tsx
+++ b/libs/webb-ui-components/src/components/Modal/Modal.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as Dialog from '@radix-ui/react-dialog';
 import { FC, useCallback, useState } from 'react';
 
-export const Modal: FC<DialogPrimitive.DialogProps> = ({
+export const Modal: FC<Dialog.DialogProps> = ({
   children,
   open,
   defaultOpen = false,
@@ -21,8 +21,8 @@ export const Modal: FC<DialogPrimitive.DialogProps> = ({
   );
 
   return (
-    <DialogPrimitive.Root open={isOpen} onOpenChange={onOpenChange} {...props}>
+    <Dialog.Root open={isOpen} onOpenChange={onOpenChange} {...props}>
       {children}
-    </DialogPrimitive.Root>
+    </Dialog.Root>
   );
 };
diff --git a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx
index c23eebac7f..595b930098 100644
--- a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx
+++ b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Transition, TransitionChild } from '@headlessui/react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as Dialog from '@radix-ui/react-dialog';
 import { forwardRef, Fragment } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { ModalContentProps } from './types';
@@ -14,7 +14,7 @@ const getTailwindSizeClass = (size: ModalContentProps['size']) => {
     case 'md':
       return 'max-w-[600px]';
     case 'lg':
-      return 'max-w-[840px]';
+      return 'max-w-[800px]';
   }
 };
 
@@ -23,7 +23,6 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
     {
       children,
       isOpen = false,
-      usePortal,
       className,
       overrideTransitionContentProps,
       overrideTransitionOverlayProps,
@@ -36,48 +35,55 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
     const isSmOrLess = useIsBreakpoint('sm', true);
     const isMdOrLess = useIsBreakpoint('md', true);
 
-    const inner = (
+    return (
       <Transition show={isOpen} {...overrideTransitionRootProps}>
         <TransitionChild
           as={Fragment}
-          enter="ease-out duration-300"
+          enter="ease-out duration-200"
           enterFrom="opacity-0"
           enterTo="opacity-100"
-          leave="ease-in duration-200"
+          leave="ease-in duration-100"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
           {...overrideTransitionOverlayProps}
         >
-          <DialogPrimitive.Overlay
+          <Dialog.Overlay
             forceMount
-            className="fixed inset-0 z-20 bg-black/65"
+            className="fixed inset-0 z-20 bg-black/65 backdrop-blur-[1px]"
           />
         </TransitionChild>
 
         <TransitionChild
           as={Fragment}
-          enter="ease-out duration-300"
+          enter={twMerge(
+            'ease-out',
+            isMdOrLess ? 'duration-300' : 'duration-200',
+          )}
           enterFrom={twMerge(
-            isMdOrLess ? 'translate-y-full' : 'opacity-0 scale-95',
+            isMdOrLess ? 'translate-y-full' : 'opacity-0 top-[calc(50%+15px)]',
           )}
-          enterTo={twMerge(
-            isMdOrLess ? 'translate-y-0' : 'opacity-100 scale-100',
+          enterTo={twMerge(isMdOrLess ? 'translate-y-0' : 'opacity-100 top-0')}
+          leave={twMerge(
+            'ease-in',
+            isMdOrLess ? 'duration-200' : 'duration-100',
           )}
-          leave="ease-in duration-200"
           leaveFrom={twMerge(
-            isMdOrLess ? 'translate-y-0' : 'opacity-100 scale-100',
+            isMdOrLess ? 'translate-y-0' : 'opacity-100 top-0',
           )}
           leaveTo={twMerge(
-            isMdOrLess ? 'translate-y-full' : 'opacity-0 scale-95',
+            isMdOrLess ? 'translate-y-full' : 'opacity-0 top-[calc(50%+15px)]',
           )}
           {...overrideTransitionContentProps}
         >
-          <DialogPrimitive.Content
+          <Dialog.Content
             forceMount
             {...props}
             className={twMerge(
-              'fixed z-50 w-full',
-              'bg-mono-0 dark:bg-mono-180 rounded-2xl',
+              // Prevent the focus border from showing.
+              'focus:outline-none',
+              'fixed z-50 w-full rounded-2xl overflow-hidden',
+              'border dark:border-mono-160',
+              'bg-mono-0 dark:bg-mono-180',
               '-translate-x-1/2 left-1/2',
               isMdOrLess
                 ? 'bottom-0 rounded-b-none'
@@ -88,24 +94,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             )}
             ref={ref}
           >
-            <DialogPrimitive.Title className="sr-only">
-              Modal
-            </DialogPrimitive.Title>
+            <Dialog.Title className="sr-only">Modal</Dialog.Title>
 
-            <DialogPrimitive.Description className="sr-only">
-              Modal
-            </DialogPrimitive.Description>
+            <Dialog.Description className="sr-only">Modal</Dialog.Description>
 
             {children}
-          </DialogPrimitive.Content>
+          </Dialog.Content>
         </TransitionChild>
       </Transition>
     );
-
-    if (usePortal) {
-      return <DialogPrimitive.Portal>{inner}</DialogPrimitive.Portal>;
-    }
-
-    return inner;
   },
 );
diff --git a/libs/webb-ui-components/src/components/Modal/types.ts b/libs/webb-ui-components/src/components/Modal/types.ts
index 19526ccf2a..cbfb041d6a 100644
--- a/libs/webb-ui-components/src/components/Modal/types.ts
+++ b/libs/webb-ui-components/src/components/Modal/types.ts
@@ -9,11 +9,6 @@ export interface ModalContentProps extends DialogContentProps {
    */
   isOpen: boolean;
 
-  /**
-   * Whether using portal to render modal
-   */
-  usePortal?: boolean;
-
   /**
    * Props to override the transition component
    */
diff --git a/libs/webb-ui-components/src/components/Pagination/Pagination.tsx b/libs/webb-ui-components/src/components/Pagination/Pagination.tsx
index bafa2d59fd..e926b29b13 100644
--- a/libs/webb-ui-components/src/components/Pagination/Pagination.tsx
+++ b/libs/webb-ui-components/src/components/Pagination/Pagination.tsx
@@ -60,7 +60,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
       <div
         {...props}
         className={twMerge(
-          'flex items-center justify-between px-3 py-4',
+          'flex items-center justify-between p-2 pl-4',
           'border-mono-40 dark:border-mono-140 border-t',
           className,
         )}
diff --git a/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx b/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx
index dded20dbec..25d23c7b5d 100644
--- a/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx
+++ b/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { forwardRef } from 'react';
+import { forwardRef, Fragment, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import * as Dialog from '@radix-ui/react-dialog';
 import { HamburgerMenu } from '@webb-tools/icons';
+import { Transition, TransitionChild } from '@headlessui/react';
 
 import { SideBarLogo } from './Logo';
 import { SideBarItems } from './SideBarItems';
@@ -22,17 +23,24 @@ export const MobileSidebar = forwardRef<HTMLDivElement, MobileSidebarProps>(
       overrideContentProps,
       pathnameOrHash,
       ActionButton,
+      onSideBarToggle,
+      isExpandedByDefault,
+      isExpanded,
       ...props
     },
     ref,
   ) => {
+    const [isOpen, setIsOpen] = useState(
+      isExpandedByDefault ?? isExpanded ?? false,
+    );
+
     return (
       <div
         className={twMerge('flex items-center', className)}
         {...props}
         ref={ref}
       >
-        <Dialog.Root>
+        <Dialog.Root onOpenChange={setIsOpen}>
           <Dialog.Trigger className="outline-none">
             <HamburgerMenu
               size="lg"
@@ -40,52 +48,79 @@ export const MobileSidebar = forwardRef<HTMLDivElement, MobileSidebarProps>(
             />
           </Dialog.Trigger>
 
-          <Dialog.Portal>
-            <Dialog.Overlay className="fixed inset-0 bg-black/65 animate-[showDialogOverlay_150ms]" />
+          <Transition show={isOpen}>
+            <TransitionChild
+              as={Fragment}
+              enter="ease-out duration-200"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Dialog.Overlay
+                forceMount
+                className="fixed inset-0 z-20 bg-black/65 backdrop-blur-[1px]"
+              />
+            </TransitionChild>
 
-            <Dialog.Content
-              {...overrideContentProps}
-              className={twMerge(
-                'w-[280px] h-full outline-none overflow-auto py-6 px-4',
-                'bg-mono-0 dark:bg-mono-200 fixed left-0 top-0',
-                'animate-[sideBarSlideLeftToRight_400ms]',
-                'flex flex-col gap-6 justify-between',
-                overrideContentProps?.className,
-              )}
+            <TransitionChild
+              as={Fragment}
+              enter="ease-out duration-200"
+              enterFrom="-translate-x-full"
+              enterTo="translate-x-0"
+              leave="ease-in duration-100"
+              leaveFrom="translate-x-0"
+              leaveTo="-translate-x-full"
             >
-              <Dialog.Title className="sr-only">Sidebar Menu</Dialog.Title>
+              <Dialog.Content
+                forceMount
+                {...overrideContentProps}
+                className={twMerge(
+                  'w-[280px] h-[calc(100%-16px)] outline-none overflow-auto py-6 px-4 z-50 rounded-xl',
+                  'bg-mono-0 dark:bg-mono-200 fixed left-2 top-2 bottom-2',
+                  'flex flex-col gap-6 justify-between',
+                  overrideContentProps?.className,
+                )}
+              >
+                <Dialog.Title className="sr-only">Sidebar Menu</Dialog.Title>
 
-              <Dialog.Description className="sr-only">
-                Sidebar Menu
-              </Dialog.Description>
+                <Dialog.Description className="sr-only">
+                  Sidebar Menu
+                </Dialog.Description>
 
-              <div className="space-y-6">
-                <SideBarLogo
-                  logoLink={logoLink}
-                  Logo={Logo}
-                  isExpanded
-                  className="block px-3"
-                />
+                <div className="space-y-6">
+                  <SideBarLogo
+                    logoLink={logoLink}
+                    Logo={Logo}
+                    isExpanded
+                    className="block px-3"
+                  />
+
+                  <SideBarItems
+                    ActionButton={ActionButton}
+                    items={items}
+                    isExpanded
+                    pathnameOrHash={pathnameOrHash}
+                    // Close the sidebar when an item is clicked.
+                    onItemClick={() => setIsOpen(false)}
+                  />
+                </div>
 
-                <SideBarItems
-                  ActionButton={ActionButton}
-                  items={items}
+                <SideBarFooter
+                  name={footer.name}
+                  Icon={footer.Icon}
+                  isInternal={footer.isInternal}
+                  href={footer.href}
+                  useNextThemesForThemeToggle={
+                    footer.useNextThemesForThemeToggle
+                  }
                   isExpanded
-                  pathnameOrHash={pathnameOrHash}
+                  className="gap-2 p-2"
                 />
-              </div>
-
-              <SideBarFooter
-                name={footer.name}
-                Icon={footer.Icon}
-                isInternal={footer.isInternal}
-                href={footer.href}
-                useNextThemesForThemeToggle={footer.useNextThemesForThemeToggle}
-                isExpanded
-                className="gap-2 p-2"
-              />
-            </Dialog.Content>
-          </Dialog.Portal>
+              </Dialog.Content>
+            </TransitionChild>
+          </Transition>
         </Dialog.Root>
       </div>
     );
diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx
index 6bcc1523f3..16133d595c 100644
--- a/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx
+++ b/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx
@@ -13,6 +13,7 @@ export const SideBarItems: FC<SideBarItemsProps> = ({
   isExpanded,
   className,
   ActionButton,
+  onItemClick,
 }) => {
   const [activeItem, setActiveItem] = useState<number>(() => {
     const activeItemIndex = items.findIndex((item) => {
@@ -59,6 +60,7 @@ export const SideBarItems: FC<SideBarItemsProps> = ({
             isExpanded={isExpanded}
             isActive={activeItem === idx}
             setIsActive={() => setActiveItem(idx)}
+            onClick={onItemClick}
           />
         );
       })}
diff --git a/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx b/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx
index 9bb90f0d81..c1728185bd 100644
--- a/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx
+++ b/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx
@@ -27,7 +27,7 @@ const StyledItem = forwardRef<HTMLDivElement, StyledSideBarItemProps>(
             ? 'text-mono-200 dark:text-mono-0'
             : 'text-mono-100 dark:text-mono-120',
           isExpanded && 'hover:bg-mono-20 dark:hover:bg-mono-190',
-          isExpanded ? 'justify-between px-2 py-3' : 'justify-center',
+          isExpanded ? 'justify-between px-4 py-3' : 'justify-center',
           isActive &&
             (subItemsCount === 0 || !isExpanded) &&
             'bg-mono-20 dark:bg-mono-190',
diff --git a/libs/webb-ui-components/src/components/SideBar/types.ts b/libs/webb-ui-components/src/components/SideBar/types.ts
index 5776acf01b..4d36e0147b 100644
--- a/libs/webb-ui-components/src/components/SideBar/types.ts
+++ b/libs/webb-ui-components/src/components/SideBar/types.ts
@@ -42,6 +42,7 @@ export interface SideBarItemsProps {
   isExpanded: boolean;
   className?: string;
   pathnameOrHash?: string;
+  onItemClick?: () => void;
 }
 
 export type SideBarItemProps = {
diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx b/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx
index 8bc943ef4b..490de23bfd 100644
--- a/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx
+++ b/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx
@@ -1,22 +1,50 @@
 import { type FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { getSkeletonClassNamesBySize } from './utils';
-import type { SkeletonLoaderProps } from './types';
+export type SkeletonSize = 'md' | 'lg' | 'xl';
+
+export interface SkeletonLoaderProps {
+  /**
+   * The icon size, possible values: `md` (16px), `lg` (24px), `xl` (48px)
+   * @default "md"
+   */
+  size?: SkeletonSize;
+
+  className?: string;
+
+  as?: 'div' | 'span';
+}
+
+export function getHeightBySize(size: SkeletonSize) {
+  switch (size) {
+    case 'xl': {
+      return 'h-12' as const;
+    }
+    case 'lg': {
+      return 'h-6' as const;
+    }
+    case 'md': {
+      return 'h-4' as const;
+    }
+  }
+}
 
 const SkeletonLoader: FC<SkeletonLoaderProps> = ({
   size = 'md',
   className,
+  as = 'div',
 }) => {
-  const baseClassNames =
-    'animate-pulse bg-slate-200 dark:bg-mono-160 w-full rounded-md';
+  const Component = as;
 
-  const classNames = twMerge(
-    baseClassNames,
-    getSkeletonClassNamesBySize(size),
-    className,
+  return (
+    <Component
+      className={twMerge(
+        'animate-pulse bg-mono-20 dark:bg-mono-160 w-full rounded-md',
+        getHeightBySize(size),
+        className,
+      )}
+    />
   );
-  return <div className={classNames} />;
 };
 
 export default SkeletonLoader;
diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/types.ts b/libs/webb-ui-components/src/components/SkeletonLoader/types.ts
deleted file mode 100644
index 3ffaa92866..0000000000
--- a/libs/webb-ui-components/src/components/SkeletonLoader/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export type SkeletonSize = 'md' | 'lg' | 'xl';
-
-export interface SkeletonLoaderProps {
-  /**
-   * The icon size, possible values: `md` (16px), `lg` (24px), `xl` (48px)
-   * @default "md"
-   */
-  size?: SkeletonSize;
-
-  /**
-   * The optional class name for overriding the style of the skeleton
-   */
-  className?: string;
-}
diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/utils.ts b/libs/webb-ui-components/src/components/SkeletonLoader/utils.ts
deleted file mode 100644
index 2b7ed094f2..0000000000
--- a/libs/webb-ui-components/src/components/SkeletonLoader/utils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { SkeletonSize } from './types';
-
-/**
- * Get the icon size in pixel based on text
- * @param size Represent the skeleton size
- * @returns The height of the skeleton
- */
-export function getSkeletonClassNamesBySize(size: SkeletonSize) {
-  switch (size) {
-    case 'xl': {
-      return 'h-12' as const;
-    }
-
-    case 'lg': {
-      return 'h-6' as const;
-    }
-
-    case 'md': {
-      return 'h-4' as const;
-    }
-
-    default: {
-      throw new Error('Unknown skeleton size');
-    }
-  }
-}
diff --git a/libs/webb-ui-components/src/components/Table/TData.tsx b/libs/webb-ui-components/src/components/Table/TData.tsx
index 6ffc2c0dc8..f2423272da 100644
--- a/libs/webb-ui-components/src/components/Table/TData.tsx
+++ b/libs/webb-ui-components/src/components/Table/TData.tsx
@@ -19,7 +19,7 @@ export const TData = forwardRef<HTMLTableCellElement, TDataProps>(
             'text-mono-140 dark:text-mono-60',
             'bg-mono-0 dark:bg-mono-180',
             !isDisabledHoverStyle &&
-              'group-hover/tr:bg-blue-0 dark:group-hover/tr:bg-mono-160',
+              'group-hover/tr:bg-blue-0 dark:group-hover/tr:bg-mono-170',
           ),
           className,
         )}
diff --git a/libs/webb-ui-components/src/components/Table/THeader.tsx b/libs/webb-ui-components/src/components/Table/THeader.tsx
index 004c231b48..bb6064202d 100644
--- a/libs/webb-ui-components/src/components/Table/THeader.tsx
+++ b/libs/webb-ui-components/src/components/Table/THeader.tsx
@@ -12,7 +12,7 @@ export const THeader = forwardRef<HTMLTableCellElement, THeaderProps>(
       <th
         {...props}
         className={twMerge(
-          'px-2 py-5 text-left border-y body1 first:pl-6 last:pr-6 border-mono-40 dark:border-mono-140 text-mono-140 dark:text-mono-60 bg-mono-0 dark:bg-mono-180',
+          'p-3 text-left border-b body2 first:pl-6 last:pr-6 border-mono-40 dark:border-mono-140 bg-mono-0 dark:bg-mono-180',
           className,
         )}
         ref={ref}
diff --git a/libs/webb-ui-components/src/components/Table/Table.tsx b/libs/webb-ui-components/src/components/Table/Table.tsx
index 7993460f13..9c9a10e3cf 100644
--- a/libs/webb-ui-components/src/components/Table/Table.tsx
+++ b/libs/webb-ui-components/src/components/Table/Table.tsx
@@ -6,7 +6,64 @@ import { twMerge } from 'tailwind-merge';
 import { Pagination } from '../Pagination';
 import { TDataMemo as TData } from './TData';
 import { THeaderMemo as THeader } from './THeader';
-import { TableProps } from './types';
+import { TableProps, TableVariant } from './types';
+
+const getVariantContainerClass = (variant: TableVariant) => {
+  switch (variant) {
+    case TableVariant.DEFAULT:
+      return 'overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160';
+    case TableVariant.GLASS_INNER:
+      return 'rounded-2xl overflow-hidden bg-mono-0 dark:bg-mono-180 px-3';
+    case TableVariant.GLASS_OUTER:
+      return 'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160 bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)] dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)] backdrop-blur-2xl';
+  }
+};
+
+const getVariantThClass = (variant: TableVariant) => {
+  switch (variant) {
+    case TableVariant.GLASS_INNER:
+      return 'py-3 !font-normal !bg-transparent border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160';
+    case TableVariant.GLASS_OUTER:
+      return 'py-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0';
+    case TableVariant.NESTED_IN_MODAL:
+      return 'z-10 py-3 sticky top-0';
+    case TableVariant.DEFAULT:
+      return '';
+  }
+};
+
+const getVariantTdClass = (variant: TableVariant) => {
+  switch (variant) {
+    case TableVariant.GLASS_INNER:
+      return '!bg-inherit border-t-0';
+    case TableVariant.GLASS_OUTER:
+      return 'border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden';
+    case TableVariant.NESTED_IN_MODAL:
+      return 'py-2 border-t-0';
+    case TableVariant.DEFAULT:
+      return '';
+  }
+};
+
+const getVariantTrClass = (variant: TableVariant) => {
+  switch (variant) {
+    case TableVariant.GLASS_OUTER:
+      return 'border-b border-mono-0 dark:border-mono-160 cursor-pointer';
+    case TableVariant.GLASS_INNER:
+    case TableVariant.DEFAULT:
+      return '';
+  }
+};
+
+const getVariantTableClass = (variant: TableVariant) => {
+  switch (variant) {
+    case TableVariant.GLASS_OUTER:
+      return 'border-separate border-spacing-y-3 py-3';
+    case TableVariant.GLASS_INNER:
+    case TableVariant.DEFAULT:
+      return '';
+  }
+};
 
 export const Table = <T extends RowData>({
   isDisabledRowHoverStyle,
@@ -25,6 +82,8 @@ export const Table = <T extends RowData>({
   trClassName,
   ref,
   getExpandedRowContent,
+  className,
+  variant,
   ...props
 }: TableProps<T, HTMLDivElement>) => {
   const getRowClickHandler = useCallback(
@@ -42,11 +101,16 @@ export const Table = <T extends RowData>({
   );
 
   return (
-    <div {...props} ref={ref}>
+    <div
+      className={twMerge(getVariantContainerClass(variant), className)}
+      {...props}
+      ref={ref}
+    >
       <div className={twMerge('w-full overflow-x-auto', tableWrapperClassName)}>
         <table
           className={twMerge(
             'w-full border-collapse table-auto',
+            getVariantTableClass(variant),
             tableClassName,
           )}
         >
@@ -55,7 +119,7 @@ export const Table = <T extends RowData>({
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
                   <THeader
-                    className={thClassName}
+                    className={twMerge(getVariantThClass(variant), thClassName)}
                     key={header.id}
                     onClick={header.column.getToggleSortingHandler()}
                     title={
@@ -99,17 +163,25 @@ export const Table = <T extends RowData>({
               </tr>
             ))}
           </thead>
+
           <tbody className={tbodyClassName}>
             {table.getRowModel().rows.map((row) => (
               <Fragment key={row.id}>
                 <tr
-                  className={twMerge('group/tr', trClassName)}
+                  className={twMerge(
+                    'group/tr',
+                    getVariantTrClass(variant),
+                    trClassName,
+                  )}
                   onClick={getRowClickHandler(row)}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TData
                       isDisabledHoverStyle={isDisabledRowHoverStyle}
-                      className={tdClassName}
+                      className={twMerge(
+                        getVariantTdClass(variant),
+                        tdClassName,
+                      )}
                       key={cell.id}
                     >
                       {flexRender(
@@ -130,6 +202,7 @@ export const Table = <T extends RowData>({
               </Fragment>
             ))}
           </tbody>
+
           {isDisplayFooter && (
             <tfoot>
               {table.getFooterGroups().map((footerGroup) => (
diff --git a/libs/webb-ui-components/src/components/Table/types.ts b/libs/webb-ui-components/src/components/Table/types.ts
index 5c6892c103..f185c5fcc5 100644
--- a/libs/webb-ui-components/src/components/Table/types.ts
+++ b/libs/webb-ui-components/src/components/Table/types.ts
@@ -5,6 +5,13 @@ import type {
   WebbComponentBase,
 } from '../../types';
 
+export enum TableVariant {
+  DEFAULT,
+  GLASS_INNER,
+  GLASS_OUTER,
+  NESTED_IN_MODAL,
+}
+
 /**
  * The `Table` props
  */
@@ -88,6 +95,8 @@ export interface TableProps<T extends RowData, E extends HTMLElement>
    * The optional function to get the expanded row content
    */
   getExpandedRowContent?: (row: Row<T>) => React.ReactNode;
+
+  variant: TableVariant;
 }
 
 /**
diff --git a/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx b/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx
index 75a59f2058..cec52ce706 100644
--- a/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx
+++ b/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx
@@ -43,12 +43,10 @@ const TokenSelector = forwardRef<HTMLButtonElement, TokenSelectorProps>(
       () =>
         twMerge(
           cx(
-            'group px-2 md:px-4 py-2 rounded-lg',
+            'group p-2 md:px-4 rounded-lg',
             'flex items-center gap-2 max-w-fit',
-            'bg-[#E2E5EB]/30 dark:bg-mono-160',
-            'border border-transparent',
-            'enabled:hover:border-mono-60',
-            'dark:enabled:hover:border-mono-140',
+            'bg-mono-40 dark:bg-mono-170',
+            'enabled:hover:bg-mono-20 enabled:hover:dark:bg-mono-160',
             'disabled:bg-[#E2E5EB]/20 dark:disabled:bg-[#3A3E53]/70',
           ),
           className,
@@ -56,10 +54,7 @@ const TokenSelector = forwardRef<HTMLButtonElement, TokenSelectorProps>(
       [className],
     );
 
-    const disabled = useMemo(
-      () => isActive || isDisabled,
-      [isDisabled, isActive],
-    );
+    const disabled = isActive || isDisabled;
 
     return (
       <button {...props} disabled={disabled} className={mergedClsx} ref={ref}>
diff --git a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
index 06eef44320..c26a297560 100644
--- a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
+++ b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx
@@ -35,13 +35,13 @@ export const TooltipBody: React.FC<TooltipBodyProps> = ({
         'radix-side-right:animate-slide-left-fade',
         'radix-side-bottom:animate-slide-up-fade',
         'radix-side-left:animate-slide-right-fade',
-        'inline-flex items-center break-all rounded p-2',
-        'bg-mono-20 dark:bg-mono-160',
+        'inline-flex items-center break-all rounded px-3 py-2',
+        'bg-mono-20 dark:bg-mono-200',
+        'border border-mono-60 dark:border-mono-180',
         'webb-shadow-sm z-[9999]',
       )}
       {...props}
     >
-      <TooltipPrimitive.Arrow className="fill-current text-mono-20 dark:text-mono-160 webb-shadow-sm" />
       <div
         className={twMerge(
           'body4 text-mono-140 dark:text-mono-80 font-normal min-w-0 max-w-[300px]',
diff --git a/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx b/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx
index b0178b5d17..9f9e9a8527 100644
--- a/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx
+++ b/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx
@@ -69,12 +69,8 @@ const TransactionInputCardRoot = forwardRef<
         {...props}
         ref={ref}
         className={twMerge(
-          'w-full rounded-xl px-3 py-1.5 space-y-2',
-          'bg-gradient-to-b',
-          'from-[rgba(255,_255,_255,_0.18)] to-[rgba(255,_255,_255,_0.6)]',
-          'hover:from-[rgba(255,_255,_255,_0.3)] hover:to-mono-0',
-          'dark:from-[rgba(43,_47,_64,_0.4)] dark:to-[rgba(112,_122,_166,_0.04)]',
-          'dark:hover:from-[rgba(43,_47,_64,_0.5)] dark:hover:to-[rgba(112,_122,_166,_0.05)]',
+          'w-full rounded-xl p-4 space-y-2',
+          'bg-mono-20 dark:bg-mono-170',
           className,
         )}
       >
@@ -97,6 +93,7 @@ const TransactionInputCardRoot = forwardRef<
     );
   },
 );
+
 TransactionInputCardRoot.displayName = 'TransactionInputCardRoot';
 
 const TransactionChainSelector = forwardRef(
@@ -221,12 +218,15 @@ const TransactionMaxAmountButton = forwardRef<
 
     const buttonCnt = useMemo(() => {
       const amount =
-        typeof maxAmount === 'number' ? toFixed(maxAmount, 5) : '--';
-      const fmtAmount =
+        // TODO: Use empty placeholder constant instead, once it's moved to Webb UI lib.
+        typeof maxAmount === 'number' ? toFixed(maxAmount, 5) : '—';
+
+      const formattedAmount =
         typeof amount === 'number' ? getRoundedAmountString(amount, 5) : amount;
+
       const tokenSym = tokenSymbol ?? '';
 
-      return `${fmtAmount} ${tokenSym}`.trim();
+      return `${formattedAmount} ${tokenSym}`.trim();
     }, [maxAmount, tokenSymbol]);
 
     const disabled = useMemo(
@@ -304,6 +304,7 @@ const TransactionMaxAmountButton = forwardRef<
             {buttonCnt}
           </TransactionButton>
         </TooltipTrigger>
+
         <TooltipBody>
           {tooltipBody === undefined
             ? accountType === 'note'
diff --git a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx
index 9919340cdc..bef99c124f 100644
--- a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx
+++ b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx
@@ -1,18 +1,15 @@
 'use client';
 
 import { Wallet } from '@webb-tools/dapp-config';
-import { Close, Spinner, WalletLineIcon } from '@webb-tools/icons';
+import { ArrowRightUp, Spinner, WalletLineIcon } from '@webb-tools/icons';
 import { FC, cloneElement, forwardRef, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import useIsBreakpoint from '../../hooks/useIsBreakpoint';
 import { PropsOf } from '../../types';
 import { Typography } from '../../typography';
 import { ListItem } from '../ListCard/ListItem';
 import { Button } from '../buttons';
 import { WalletConnectionCardProps } from './types';
-import { ModalTitle } from '../Modal/ModalTitle';
-import { DialogClose } from '@radix-ui/react-dialog';
-import { ModalDescription } from '../Modal/ModalDescription';
+import useIsBreakpoint from '../../hooks/useIsBreakpoint';
 
 export const WalletConnectionCard = forwardRef<
   HTMLDivElement,
@@ -23,7 +20,7 @@ export const WalletConnectionCard = forwardRef<
       className,
       connectingWalletId,
       errorBtnText = 'Try Again',
-      errorMessage = 'Connection Failed! Please try again.',
+      errorMessage = 'Connection failed, please try again.',
       failedWalletId,
       onWalletSelect,
       onClose,
@@ -37,7 +34,7 @@ export const WalletConnectionCard = forwardRef<
     },
     ref,
   ) => {
-    const isDesktop = useIsBreakpoint('md');
+    const isMdOrLess = useIsBreakpoint('md', true);
 
     const connectingWallet = useMemo(() => {
       if (!connectingWalletId) {
@@ -55,106 +52,23 @@ export const WalletConnectionCard = forwardRef<
       return wallets.find((wallet) => wallet.id === failedWalletId);
     }, [failedWalletId, wallets]);
 
-    if (isDesktop) {
-      return (
-        <div
-          {...props}
-          className={twMerge(
-            'flex max-w-max rounded-lg bg-mono-0 dark:bg-mono-180',
-            className,
-          )}
-          ref={ref}
-        >
-          <div className="w-[288px] lg:border-r border-r-mono-40 dark:border-r-mono-160">
-            <div className="px-6 py-4">
-              <ModalTitle asChild>
-                <Typography variant="h5" fw="bold">
-                  Connect a Wallet
-                </Typography>
-              </ModalTitle>
-
-              <ModalDescription className="sr-only">
-                Select a wallet from the list below
-              </ModalDescription>
-            </div>
-            <WalletList wallets={wallets} onWalletSelect={onWalletSelect} />
-          </div>
-
-          {/** Wallet frame */}
-          <div className="w-[432px] h-[504px] flex flex-col">
-            {/** Top */}
-            <div className="w-full h-[60px] flex justify-end items-center px-4">
-              <DialogClose asChild>
-                <button onClick={onClose}>
-                  <Close size="lg" />
-                </button>
-              </DialogClose>
-            </div>
-
-            {/** Content */}
-            <div className="flex items-center justify-center grow">
-              <WalletContent
-                failedWallet={failedWallet}
-                connectingWallet={connectingWallet}
-                errorBtnText={errorBtnText}
-                errorMessage={errorMessage}
-                onTryAgainBtnClick={onTryAgainBtnClick}
-                contentDefaultText={contentDefaultText}
-                tryAgainBtnProps={tryAgainBtnProps}
-              />
-            </div>
+    const showList = !isMdOrLess || (!connectingWallet && !failedWallet);
 
-            {/** Bottom */}
-            <DownloadWallet
-              downloadWalletURL={downloadWalletURL}
-              getHelpURL={getHelpURL}
-              connectingWallet={connectingWallet}
-              failedWallet={failedWallet}
-            />
-          </div>
-        </div>
-      );
-    }
+    const showContent = !isMdOrLess || connectingWallet || failedWallet;
 
     return (
-      <div
-        {...props}
-        className={twMerge(
-          'max-w-full w-[356px] min-h-[448px] mx-9 rounded-lg bg-mono-0 dark:bg-mono-180',
-          'flex flex-col',
-          className,
-        )}
-        ref={ref}
-      >
-        <div className="flex items-center justify-between px-6 py-4">
-          <div>
-            <ModalTitle asChild>
-              <Typography variant="h5" fw="bold" className="flex-1">
-                Connect a Wallet
-              </Typography>
-            </ModalTitle>
-
-            <ModalDescription className="sr-only">
-              Select a wallet from the list below
-            </ModalDescription>
+      <div {...props} className={twMerge('flex w-full', className)} ref={ref}>
+        {showList && (
+          <div className="flex-grow md:max-w-[220px] md:min-h-[400px] md:border-r border-mono-40 dark:border-mono-160">
+            <WalletList wallets={wallets} onWalletSelect={onWalletSelect} />
           </div>
+        )}
 
-          <DialogClose asChild>
-            <button onClick={onClose}>
-              <Close size="lg" />
-            </button>
-          </DialogClose>
-        </div>
-
-        {!failedWallet && !connectingWallet ? (
-          <WalletList
-            wallets={wallets}
-            onWalletSelect={onWalletSelect}
-            className="w-full grow"
-          />
-        ) : (
-          <div className="flex items-center justify-center grow">
+        {showContent && (
+          <div className="flex-grow flex flex-col items-stretch justify-center py-6 md:py-0">
+            {/** Content */}
             <WalletContent
+              className="flex flex-col gap-2 items-center justify-center flex-grow self-center"
               failedWallet={failedWallet}
               connectingWallet={connectingWallet}
               errorBtnText={errorBtnText}
@@ -163,15 +77,18 @@ export const WalletConnectionCard = forwardRef<
               contentDefaultText={contentDefaultText}
               tryAgainBtnProps={tryAgainBtnProps}
             />
+
+            {/** Bottom */}
+            <div className="hidden md:flex flex-shrink items-center justify-end">
+              <DownloadWallet
+                downloadWalletURL={downloadWalletURL}
+                getHelpURL={getHelpURL}
+                connectingWallet={connectingWallet}
+                failedWallet={failedWallet}
+              />
+            </div>
           </div>
         )}
-
-        <DownloadWallet
-          downloadWalletURL={downloadWalletURL}
-          getHelpURL={getHelpURL}
-          connectingWallet={connectingWallet}
-          failedWallet={failedWallet}
-        />
       </div>
     );
   },
@@ -211,11 +128,7 @@ const WalletContent = forwardRef<
     ref,
   ) => {
     return (
-      <div
-        {...props}
-        className={twMerge('space-y-2 w-[320px]', className)}
-        ref={ref}
-      >
+      <div {...props} className={twMerge('max-w-[320px]', className)} ref={ref}>
         {/** Display failed wallet */}
         {failedWallet && (
           <>
@@ -302,35 +215,23 @@ const WalletList: FC<
   }
 > = ({ wallets, onWalletSelect, className }) => {
   return (
-    <div className={className}>
-      <div className="pb-4">
-        <Typography
-          variant="body2"
-          fw="semibold"
-          className="px-6 py-2 text-mono-100 dark:text-mono-40"
+    <ul className={twMerge('pt-4', className)}>
+      {wallets.map((wallet) => (
+        <ListItem
+          key={wallet.id}
+          className="cursor-pointer"
+          onClick={() => onWalletSelect?.(wallet)}
         >
-          Select below
-        </Typography>
-
-        <ul>
-          {wallets.map((wallet) => (
-            <ListItem
-              key={wallet.id}
-              className="cursor-pointer bg-mono-0 dark:bg-mono-180"
-              onClick={() => onWalletSelect?.(wallet)}
-            >
-              <div className="flex items-center gap-2">
-                {wallet.Logo}
+          <div className="flex items-center gap-2">
+            {wallet.Logo}
 
-                <Typography variant="body1" fw="bold">
-                  {wallet.title}
-                </Typography>
-              </div>
-            </ListItem>
-          ))}
-        </ul>
-      </div>
-    </div>
+            <Typography variant="body1" fw="bold">
+              {wallet.title}
+            </Typography>
+          </div>
+        </ListItem>
+      ))}
+    </ul>
   );
 };
 
@@ -350,12 +251,16 @@ const DownloadWallet: FC<
         Don't have{' '}
         {connectingWallet?.title ?? failedWallet?.title ?? 'the wallet'}?
       </Typography>
+
       {downloadWalletURL ? (
         <Button
           variant="utility"
           size="sm"
           target="_blank"
           href={downloadWalletURL.toString()}
+          rightIcon={
+            <ArrowRightUp className="fill-current dark:fill-current" />
+          }
         >
           Download
         </Button>
diff --git a/libs/webb-ui-components/src/components/WalletModal/WalletModal.tsx b/libs/webb-ui-components/src/components/WalletModal/WalletModal.tsx
index 9267d71209..6c21820465 100644
--- a/libs/webb-ui-components/src/components/WalletModal/WalletModal.tsx
+++ b/libs/webb-ui-components/src/components/WalletModal/WalletModal.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { FC, useCallback, useMemo } from 'react';
-import { Modal, ModalContent } from '../Modal';
+import { Modal, ModalContent, ModalHeader } from '../Modal';
 import { WalletConnectionCard } from '../WalletConnectionCard';
 import { WalletModalProps } from './types';
 import WalletNotInstalledError from '@webb-tools/dapp-types/errors/WalletNotInstalledError';
@@ -80,7 +80,19 @@ export const WalletModal: FC<WalletModalProps> = ({
 
   return (
     <Modal open={isModalOpen} onOpenChange={handleOpenChange}>
-      <ModalContent isOpen={isModalOpen} onCloseAutoFocus={() => resetState()}>
+      <ModalContent
+        isOpen={isModalOpen}
+        onCloseAutoFocus={() => resetState()}
+        onInteractOutside={() => handleOpenChange(false)}
+        className="overflow-hidden"
+      >
+        <ModalHeader
+          onClose={() => handleOpenChange(false)}
+          className="border-b border-mono-40 dark:border-mono-160 pb-4"
+        >
+          Connect Wallet
+        </ModalHeader>
+
         <WalletConnectionCard
           wallets={supportedWallets}
           onWalletSelect={(nextWallet) =>
diff --git a/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx b/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx
index a6ca39be3b..5f8e7d20de 100644
--- a/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx
+++ b/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx
@@ -25,6 +25,7 @@ const ChainOrTokenButton = forwardRef<
     ref,
   ) => {
     const IconCmp = iconType === 'chain' ? ChainIcon : TokenIcon;
+    const isToken = iconType === 'token';
 
     const handleClick = useCallback(
       (e: EventFor<'button', 'onClick'>) => {
@@ -37,18 +38,25 @@ const ChainOrTokenButton = forwardRef<
       [disabled, onClick],
     );
 
+    const isClickable = onClick !== undefined && !disabled;
+
     return (
       <button
         {...props}
         onClick={handleClick}
         type="button"
         className={twMerge(
-          'rounded-lg border-2 p-2 pl-4',
-          'bg-mono-0/10 border-mono-60',
-          'hover:bg-mono-0/30',
-          'dark:bg-mono-0/5 dark:border-mono-140',
-          'dark:hover:bg-mono-0/10',
-          (onClick === undefined || disabled) && 'cursor-default',
+          'rounded-lg px-4 py-2',
+          !isClickable && 'cursor-default',
+          // Use a different background for embedded icon buttons
+          // for contrast.
+          isToken
+            ? 'bg-mono-40 dark:bg-mono-170'
+            : 'bg-mono-20 dark:bg-mono-180',
+          isClickable &&
+            (isToken
+              ? 'hover:bg-mono-60 hover:dark:bg-mono-160'
+              : 'hover:bg-mono-40 hover:dark:bg-mono-170'),
           className,
         )}
         ref={ref}
@@ -63,10 +71,12 @@ const ChainOrTokenButton = forwardRef<
                 name={value}
               />
             )}
+
             <p className={twMerge('font-bold', textClassName)}>
               {value ?? placeholder}
             </p>
           </div>
+
           {!disabled && (
             <ChevronDown
               size="lg"
diff --git a/libs/webb-ui-components/src/components/buttons/WalletButton.tsx b/libs/webb-ui-components/src/components/buttons/WalletButton.tsx
index a01ee661f1..f12303447d 100644
--- a/libs/webb-ui-components/src/components/buttons/WalletButton.tsx
+++ b/libs/webb-ui-components/src/components/buttons/WalletButton.tsx
@@ -1,31 +1,27 @@
 import { getFlexBasic } from '@webb-tools/icons/utils';
-import { cloneElement, forwardRef, useMemo } from 'react';
+import { cloneElement, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { isHex } from 'viem';
 import { Typography } from '../../typography/Typography';
 import { shortenHex, shortenString } from '../../utils';
 import { WalletButtonProps } from './types';
+import { ChevronDown } from '@webb-tools/icons';
 
 const WalletButton = forwardRef<HTMLButtonElement, WalletButtonProps>(
   (
     { accountName, wallet, address, className, addressClassname, ...props },
     ref,
   ) => {
-    const addressClx = useMemo(() => {
-      return twMerge('truncate dark:text-mono-0', addressClassname);
-    }, [addressClassname]);
-
     return (
       <button
         {...props}
         type="button"
         ref={ref}
         className={twMerge(
-          'rounded-full border-2 py-2 px-4 max-w-52',
-          'bg-mono-0/10 border-mono-60',
-          'hover:bg-mono-0/30',
-          'dark:bg-mono-0/5 dark:border-mono-140',
-          'dark:hover:bg-mono-0/10',
+          'rounded-lg py-2 px-4 max-w-56',
+          'bg-mono-0/10 dark:bg-mono-0/5',
+          'hover:bg-mono-100/10 dark:hover:bg-mono-0/10',
+          'border-2 border-mono-60 dark:border-mono-140',
           className,
         )}
       >
@@ -37,18 +33,23 @@ const WalletButton = forwardRef<HTMLButtonElement, WalletButtonProps>(
               `shrink-0 grow-0 ${getFlexBasic('lg')}`,
             ),
           })}
-          <Typography
-            variant="body1"
-            fw="bold"
-            component="p"
-            className={addressClx}
-          >
-            {accountName
-              ? accountName
-              : isHex(address)
-                ? `${shortenHex(address)}`
-                : `${shortenString(address)}`}
-          </Typography>
+
+          <div className="flex items-center">
+            <Typography
+              variant="body1"
+              fw="bold"
+              component="p"
+              className={twMerge('truncate dark:text-mono-0', addressClassname)}
+            >
+              {accountName
+                ? accountName
+                : isHex(address)
+                  ? `${shortenHex(address)}`
+                  : `${shortenString(address)}`}
+            </Typography>
+
+            <ChevronDown size="lg" />
+          </div>
         </div>
       </button>
     );
diff --git a/libs/webb-ui-components/src/components/buttons/types.ts b/libs/webb-ui-components/src/components/buttons/types.ts
index 254e4ac695..55df4559f8 100644
--- a/libs/webb-ui-components/src/components/buttons/types.ts
+++ b/libs/webb-ui-components/src/components/buttons/types.ts
@@ -176,30 +176,21 @@ export type ButtonClassNames = {
   } & Record<ButtonSize, string>;
 };
 
-/**
- * The ChainOrTokenButtonProps component props
- */
 export type ChainOrTokenButtonProps = PropsOf<'button'> & {
+  placeholder?: string;
+  iconClassName?: string;
+  iconType: 'chain' | 'token';
+
   /**
    * The text to display in the button
    */
   value?: string;
 
-  /**
-   * The placeholder to display when the value is not set
-   */
-  placeholder?: string;
-
   /**
    * The status of the button
    */
   status?: StatusIndicatorProps['variant'];
 
-  /**
-   * The className of the icon
-   */
-  iconClassName?: string;
-
   /**
    * The className of the chain name
    */
@@ -209,11 +200,6 @@ export type ChainOrTokenButtonProps = PropsOf<'button'> & {
    * The className of the dropdown icon
    */
   dropdownClassName?: string;
-
-  /**
-   * The icon's type
-   */
-  iconType: 'chain' | 'token';
 };
 
 /**
diff --git a/package.json b/package.json
index 8bff94465e..413c0a14f4 100644
--- a/package.json
+++ b/package.json
@@ -192,7 +192,7 @@
     "@webb-tools/interfaces": "1.0.11",
     "@webb-tools/sdk-core": "0.1.4-127",
     "@webb-tools/tangle-restaking-types": "^0.1.0",
-    "@webb-tools/tangle-substrate-types": "^0.9.0",
+    "@webb-tools/tangle-substrate-types": "0.9.0",
     "@webb-tools/test-utils": "0.1.8",
     "@webb-tools/tokens": "1.0.11",
     "@webb-tools/utils": "1.0.11",
diff --git a/yarn.lock b/yarn.lock
index 6d6cf5ff38..2187bba2e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18206,7 +18206,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webb-tools/protocol-substrate-types@npm:@webb-tools/tangle-substrate-types@^0.9.0, @webb-tools/tangle-substrate-types@npm:^0.9.0":
+"@webb-tools/protocol-substrate-types@npm:@webb-tools/tangle-substrate-types@^0.9.0, @webb-tools/tangle-substrate-types@npm:0.9.0":
   version: 0.9.0
   resolution: "@webb-tools/tangle-substrate-types@npm:0.9.0"
   dependencies:
@@ -46064,7 +46064,7 @@ __metadata:
     "@webb-tools/interfaces": "npm:1.0.11"
     "@webb-tools/sdk-core": "npm:0.1.4-127"
     "@webb-tools/tangle-restaking-types": "npm:^0.1.0"
-    "@webb-tools/tangle-substrate-types": "npm:^0.9.0"
+    "@webb-tools/tangle-substrate-types": "npm:0.9.0"
     "@webb-tools/test-utils": "npm:0.1.8"
     "@webb-tools/tokens": "npm:1.0.11"
     "@webb-tools/utils": "npm:1.0.11"