diff --git a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
index 7f3bb7510..054fcfdec 100644
--- a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
+++ b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx
@@ -15,7 +15,7 @@ import Decimal from 'decimal.js';
 import { FC, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import AmountInput from '../../components/AmountInput/AmountInput';
+import AmountInput from '../../components/AmountInput';
 import { BRIDGE_SUPPORTED_TOKENS } from '../../constants/bridge';
 import { useBridge } from '../../context/BridgeContext';
 import convertDecimalToBn from '../../utils/convertDecimalToBn';
@@ -68,7 +68,7 @@ const AmountAndTokenInput: FC = () => {
           title="Amount"
           amount={amount}
           setAmount={setAmount}
-          baseInputOverrides={{
+          wrapperOverrides={{
             isFullWidth: true,
           }}
           placeholder=""
diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
index 4c5845f4e..05438d80c 100644
--- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
+++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx
@@ -4,9 +4,7 @@ import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { FC, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import AddressInput, {
-  AddressType,
-} from '../../components/AddressInput/AddressInput';
+import AddressInput, { AddressType } from '../../components/AddressInput';
 import { useBridge } from '../../context/BridgeContext';
 import useActiveAccountAddress from '../../hooks/useActiveAccountAddress';
 import { isEVMChain } from '../../utils/bridge';
@@ -84,7 +82,7 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
                   : AddressType.Substrate
               }
               title="Receiver Address"
-              baseInputOverrides={{ isFullWidth: true }}
+              wrapperOverrides={{ isFullWidth: true }}
               value={destinationAddress}
               setValue={setDestinationAddress}
               setErrorMessage={(error) =>
diff --git a/apps/tangle-dapp/app/bridge/page.tsx b/apps/tangle-dapp/app/bridge/page.tsx
index aa2ef0e92..3415afe1d 100644
--- a/apps/tangle-dapp/app/bridge/page.tsx
+++ b/apps/tangle-dapp/app/bridge/page.tsx
@@ -1,6 +1,15 @@
+import {
+  ExchangeFunds,
+  TokenSwapLineIcon,
+  WalletLineIcon,
+} from '@webb-tools/icons';
+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 { OnboardingPageKey } from '../../constants';
 import createPageMetadata from '../../utils/createPageMetadata';
 import BridgeContainer from './BridgeContainer';
 
@@ -11,6 +20,30 @@ 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>
   );
diff --git a/apps/tangle-dapp/app/liquid-staking/page.tsx b/apps/tangle-dapp/app/liquid-staking/page.tsx
index d48aea5a2..391308b04 100644
--- a/apps/tangle-dapp/app/liquid-staking/page.tsx
+++ b/apps/tangle-dapp/app/liquid-staking/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  AddLineIcon,
   CoinIcon,
   EditLine,
   Search,
@@ -8,6 +9,7 @@ import {
   WaterDropletIcon,
 } from '@webb-tools/icons';
 import {
+  Button,
   TabContent,
   TabsList as WebbTabsList,
   TabsRoot,
@@ -15,7 +17,7 @@ import {
   TANGLE_DOCS_LIQUID_STAKING_URL,
   Typography,
 } from '@webb-tools/webb-ui-components';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import LsStakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsStakeCard';
 import LsUnstakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsUnstakeCard';
@@ -24,6 +26,7 @@ import OnboardingModal from '../../components/OnboardingModal/OnboardingModal';
 import StatItem from '../../components/StatItem';
 import { OnboardingPageKey } from '../../constants';
 import { LsSearchParamKey } from '../../constants/liquidStaking/types';
+import LsCreatePoolModal from '../../containers/LsCreatePoolModal';
 import LsMyProtocolsTable from '../../containers/LsMyProtocolsTable';
 import { LsProtocolsTable } from '../../containers/LsPoolsTable';
 import useNetworkStore from '../../context/useNetworkStore';
@@ -61,6 +64,7 @@ const LiquidStakingPage: FC = () => {
 
   const { network } = useNetworkStore();
   const { switchNetwork } = useNetworkSwitcher();
+  const [isCreatePoolModalOpen, setIsCreatePoolModalOpen] = useState(false);
 
   const lsTangleNetwork = getLsTangleNetwork(lsNetworkId);
 
@@ -87,6 +91,11 @@ const LiquidStakingPage: FC = () => {
 
   return (
     <div>
+      <LsCreatePoolModal
+        isOpen={isCreatePoolModalOpen}
+        setIsOpen={setIsCreatePoolModalOpen}
+      />
+
       <OnboardingModal
         title="Get Started with Liquid Staking"
         pageKey={OnboardingPageKey.LIQUID_STAKING}
@@ -141,11 +150,7 @@ const LiquidStakingPage: FC = () => {
           </div>
 
           <div className="flex gap-6 h-full">
-            <StatItem
-              title="$123.01"
-              subtitle="My Total Staking"
-              largeSubtitle
-            />
+            <StatItem title="$123.01" subtitle="My Total Staking" />
           </div>
         </div>
 
@@ -192,6 +197,20 @@ const LiquidStakingPage: FC = () => {
                 );
               })}
             </WebbTabsList>
+
+            {/**
+             * TODO: Check what's the min. amount required to create a new pool. If the free balance doesn't meet the min, disable the button and show a tooltip with the reason.
+             */}
+            <Button
+              onClick={() => setIsCreatePoolModalOpen(true)}
+              variant="utility"
+              size="sm"
+              rightIcon={
+                <AddLineIcon className="fill-current dark:fill-current" />
+              }
+            >
+              Create Pool
+            </Button>
           </div>
 
           {/* Tabs Content */}
diff --git a/apps/tangle-dapp/app/restake/layout.tsx b/apps/tangle-dapp/app/restake/layout.tsx
index 167385abc..5952c40d0 100644
--- a/apps/tangle-dapp/app/restake/layout.tsx
+++ b/apps/tangle-dapp/app/restake/layout.tsx
@@ -1,9 +1,17 @@
+import { Metadata } from 'next';
 import { FC, PropsWithChildren } from 'react';
 
+import createPageMetadata from '../../utils/createPageMetadata';
 import Providers from './providers';
 
 export const dynamic = 'force-static';
 
+export const metadata: Metadata = createPageMetadata({
+  title: 'Restake',
+  description:
+    "Explore vaults, deposit assets, and select operators to earn rewards with Tangle's restaking infrastructure.",
+});
+
 const RestakeLayout: FC<PropsWithChildren> = ({ children }) => {
   return <Providers>{children}</Providers>;
 };
diff --git a/apps/tangle-dapp/app/restake/page.tsx b/apps/tangle-dapp/app/restake/page.tsx
index cb8a69054..c87e04613 100644
--- a/apps/tangle-dapp/app/restake/page.tsx
+++ b/apps/tangle-dapp/app/restake/page.tsx
@@ -1,6 +1,11 @@
 'use client';
 
-import { AddCircleLineIcon, Search, SparklingIcon } from '@webb-tools/icons';
+import {
+  AddCircleLineIcon,
+  Search,
+  SparklingIcon,
+  UserLineIcon,
+} from '@webb-tools/icons';
 import { 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';
@@ -65,7 +70,7 @@ export default function RestakePage() {
         />
 
         <OnboardingItem
-          Icon={AddCircleLineIcon}
+          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."
         />
@@ -125,9 +130,9 @@ export default function RestakePage() {
               <Typography variant="body1">{CONTENT.HOW_IT_WORKS}</Typography>
             </div>
 
-            {/** TODO: Determine read more link here */}
             <Button
-              href="#"
+              href={TANGLE_DOCS_RESTAKING_URL}
+              target="_blank"
               variant="link"
               size="sm"
               className="inline-block ml-auto"
diff --git a/apps/tangle-dapp/components/AddressInput/AddressInput.tsx b/apps/tangle-dapp/components/AddressInput.tsx
similarity index 76%
rename from apps/tangle-dapp/components/AddressInput/AddressInput.tsx
rename to apps/tangle-dapp/components/AddressInput.tsx
index 922c14353..ae2b16ddd 100644
--- a/apps/tangle-dapp/components/AddressInput/AddressInput.tsx
+++ b/apps/tangle-dapp/components/AddressInput.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { isAddress } from '@polkadot/util-crypto';
-import { Button, Input } from '@webb-tools/webb-ui-components';
+import { Avatar, Button, Input } from '@webb-tools/webb-ui-components';
 import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
-import { isEvmAddress } from '../../utils/isEvmAddress';
-import BaseInput, { BaseInputProps } from '../AmountInput/BaseInput';
+import { isEvmAddress } from '../utils/isEvmAddress';
+import InputWrapper, { InputWrapperProps } from './InputWrapper';
 
 export enum AddressType {
   EVM,
@@ -17,11 +17,12 @@ export type AddressInputProps = {
   id: string;
   title: string;
   placeholder?: string;
+  tooltip?: string;
   type: AddressType;
   showPasteButton?: boolean;
   value: string;
   isDisabled?: boolean;
-  baseInputOverrides?: Partial<BaseInputProps>;
+  wrapperOverrides?: Partial<InputWrapperProps>;
   setValue: (newValue: string) => void;
   setErrorMessage?: (error: string | null) => void;
 };
@@ -29,13 +30,14 @@ export type AddressInputProps = {
 const AddressInput: FC<AddressInputProps> = ({
   id,
   title,
+  tooltip,
   placeholder,
   type,
   value,
   setValue,
   showPasteButton = true,
   isDisabled = false,
-  baseInputOverrides,
+  wrapperOverrides,
   setErrorMessage: setErrorMessageOnParent,
 }) => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -47,11 +49,10 @@ const AddressInput: FC<AddressInputProps> = ({
     });
   }, [setValue]);
 
-  const actions: ReactNode = (
-    <>
-      {showPasteButton && (
+  const actions: ReactNode =
+    value === '' && showPasteButton ? (
+      <>
         <Button
-          isDisabled={value !== ''}
           key="paste"
           size="sm"
           variant="utility"
@@ -60,17 +61,19 @@ const AddressInput: FC<AddressInputProps> = ({
         >
           Paste
         </Button>
-      )}
 
-      {baseInputOverrides?.actions}
-    </>
-  );
+        {wrapperOverrides?.actions}
+      </>
+    ) : (
+      wrapperOverrides?.actions
+    );
 
   const handleChange = useCallback(
     (newValue: string) => {
+      setValue(newValue);
+
       if (newValue === '') {
         setErrorMessage(null);
-        setValue(newValue);
 
         return;
       }
@@ -87,8 +90,6 @@ const AddressInput: FC<AddressInputProps> = ({
       } else {
         setErrorMessage(null);
       }
-
-      setValue(newValue);
     },
     [setValue, type],
   );
@@ -100,18 +101,25 @@ const AddressInput: FC<AddressInputProps> = ({
     }
   }, [errorMessage, setErrorMessageOnParent]);
 
+  const isEvm = isEvmAddress(value);
+
   return (
-    <BaseInput
+    <InputWrapper
       id={id}
       title={title}
+      tooltip={tooltip}
       errorMessage={errorMessage ?? undefined}
-      {...baseInputOverrides}
+      bodyClassName="flex items-center gap-1"
+      {...wrapperOverrides}
       actions={actions}
     >
+      <Avatar theme={isEvm ? 'ethereum' : 'substrate'} value={value} />
+
       <Input
         id={id}
         inputRef={inputRef}
-        inputClassName="placeholder:text-md"
+        className="w-full"
+        inputClassName="placeholder:text-md text-sm"
         type="text"
         placeholder={placeholder}
         size="sm"
@@ -123,7 +131,7 @@ const AddressInput: FC<AddressInputProps> = ({
         isControlled
         spellCheck={false}
       />
-    </BaseInput>
+    </InputWrapper>
   );
 };
 
diff --git a/apps/tangle-dapp/components/AmountInput/AmountInput.tsx b/apps/tangle-dapp/components/AmountInput.tsx
similarity index 85%
rename from apps/tangle-dapp/components/AmountInput/AmountInput.tsx
rename to apps/tangle-dapp/components/AmountInput.tsx
index cef785430..5f935a261 100644
--- a/apps/tangle-dapp/components/AmountInput/AmountInput.tsx
+++ b/apps/tangle-dapp/components/AmountInput.tsx
@@ -3,9 +3,9 @@ import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config/constants/tangle'
 import { Button, Input } from '@webb-tools/webb-ui-components';
 import { FC, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 
-import useNetworkStore from '../../context/useNetworkStore';
-import useInputAmount from '../../hooks/useInputAmount';
-import BaseInput, { BaseInputProps } from './BaseInput';
+import useNetworkStore from '../context/useNetworkStore';
+import useInputAmount from '../hooks/useInputAmount';
+import InputWrapper, { InputWrapperProps } from './InputWrapper';
 
 export type AmountInputProps = {
   id: string;
@@ -18,7 +18,7 @@ export type AmountInputProps = {
   amount: BN | null;
   decimals?: number;
   isDisabled?: boolean;
-  baseInputOverrides?: Partial<BaseInputProps>;
+  wrapperOverrides?: Partial<InputWrapperProps>;
   errorOnEmptyValue?: boolean;
   setAmount: (newAmount: BN | null) => void;
   setErrorMessage?: (error: string | null) => void;
@@ -36,12 +36,13 @@ const AmountInput: FC<AmountInputProps> = ({
   setAmount,
   min = null,
   max = null,
-  decimals = TANGLE_TOKEN_DECIMALS, // Default to the Tangle token decimals.
+  // Default to the Tangle token decimals.
+  decimals = TANGLE_TOKEN_DECIMALS,
   minErrorMessage,
   maxErrorMessage,
   showMaxAction = true,
   isDisabled = false,
-  baseInputOverrides,
+  wrapperOverrides,
   errorOnEmptyValue = false,
   setErrorMessage,
   placeholder,
@@ -95,19 +96,19 @@ const AmountInput: FC<AmountInputProps> = ({
           </Button>
         )}
 
-        {baseInputOverrides?.actions}
+        {wrapperOverrides?.actions}
       </>
     ),
-    [max, showMaxAction, amount, isDisabled, setMaxAmount, baseInputOverrides],
+    [max, showMaxAction, amount, isDisabled, setMaxAmount, wrapperOverrides],
   );
 
   return (
-    <BaseInput
+    <InputWrapper
       id={id}
       title={title}
       errorMessage={errorMessage ?? undefined}
       isDisabled={isDisabled}
-      {...baseInputOverrides}
+      {...wrapperOverrides}
       actions={actions}
       wrapperClassName={wrapperClassName}
       bodyClassName={bodyClassName}
@@ -128,7 +129,7 @@ const AmountInput: FC<AmountInputProps> = ({
         isDisabled={isDisabled}
         isControlled
       />
-    </BaseInput>
+    </InputWrapper>
   );
 };
 
diff --git a/apps/tangle-dapp/components/AmountInput/BaseInput.tsx b/apps/tangle-dapp/components/InputWrapper.tsx
similarity index 94%
rename from apps/tangle-dapp/components/AmountInput/BaseInput.tsx
rename to apps/tangle-dapp/components/InputWrapper.tsx
index 08c7a3665..71cfd7c7a 100644
--- a/apps/tangle-dapp/components/AmountInput/BaseInput.tsx
+++ b/apps/tangle-dapp/components/InputWrapper.tsx
@@ -16,10 +16,10 @@ import {
 } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import InputAction from '../../containers/ManageProfileModalContainer/InputAction';
-import { useErrorCountContext } from '../../context/ErrorsContext';
+import InputAction from '../containers/ManageProfileModalContainer/InputAction';
+import { useErrorCountContext } from '../context/ErrorsContext';
 
-export type BaseInputProps = {
+export type InputWrapperProps = {
   title: string;
   id: string;
   children: ReactNode;
@@ -40,7 +40,7 @@ export type BaseInputProps = {
   tooltip?: ReactNode;
 };
 
-const BaseInput: FC<BaseInputProps> = ({
+const InputWrapper: FC<InputWrapperProps> = ({
   id,
   title,
   children,
@@ -172,4 +172,4 @@ const BaseInput: FC<BaseInputProps> = ({
   );
 };
 
-export default BaseInput;
+export default InputWrapper;
diff --git a/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx b/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx
index 6faf77969..c7b229aed 100644
--- a/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/ExternalLink.tsx
@@ -21,9 +21,7 @@ const ExternalLink: FC<ExternalLinkProps> = ({
       target="_blank"
       size="sm"
       variant="link"
-      rightIcon={
-        <Icon className="dark:fill-blue-50 group-hover:dark:fill-blue-30" />
-      }
+      rightIcon={<Icon className="fill-current dark:fill-current" />}
     >
       {children}
     </Button>
diff --git a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx
index f4c91e85e..4dfab053a 100644
--- a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx
+++ b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx
@@ -243,6 +243,7 @@ const LsMyPoolsTable: FC<LsMyPoolsTableProps> = ({ pools, isShown }) => {
     return (
       <TableStatus
         title="No active pools"
+        className={sharedTableStatusClxs}
         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"
diff --git a/apps/tangle-dapp/components/LiquidStaking/LsProtocolDropdownInput.tsx b/apps/tangle-dapp/components/LiquidStaking/LsProtocolDropdownInput.tsx
new file mode 100644
index 000000000..1a6c7dd9d
--- /dev/null
+++ b/apps/tangle-dapp/components/LiquidStaking/LsProtocolDropdownInput.tsx
@@ -0,0 +1,106 @@
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { ChainIcon } from '@webb-tools/icons';
+import {
+  Dropdown,
+  DropdownBody,
+  DropdownMenuItem,
+  Typography,
+} from '@webb-tools/webb-ui-components';
+import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
+import { FC, useCallback } from 'react';
+
+import { LS_DERIVATIVE_TOKEN_PREFIX } from '../../constants/liquidStaking/constants';
+import { LsNetworkId, LsProtocolId } from '../../constants/liquidStaking/types';
+import getLsNetwork from '../../utils/liquidStaking/getLsNetwork';
+import getLsProtocolDef from '../../utils/liquidStaking/getLsProtocolDef';
+import InputWrapper from '../InputWrapper';
+import LsTokenIcon from '../LsTokenIcon';
+import DropdownChevronIcon from './stakeAndUnstake/DropdownChevronIcon';
+
+type LsProtocolDropdownInputProps = {
+  id: string;
+  networkId: LsNetworkId;
+  protocolId: LsProtocolId;
+  setProtocolId?: (newProtocolId: LsProtocolId) => void;
+  isDerivativeVariant: boolean;
+};
+
+const LsProtocolDropdownInput: FC<LsProtocolDropdownInputProps> = ({
+  id,
+  networkId,
+  protocolId,
+  setProtocolId,
+  isDerivativeVariant,
+}) => {
+  const protocol = getLsProtocolDef(protocolId);
+  const network = getLsNetwork(networkId);
+
+  const trySetProtocolId = useCallback(
+    (newProtocolId: LsProtocolId) => {
+      return () => {
+        if (setProtocolId === undefined) {
+          return;
+        }
+
+        setProtocolId(newProtocolId);
+      };
+    },
+    [setProtocolId],
+  );
+
+  return (
+    <InputWrapper title="Protocol" id={id}>
+      <Dropdown>
+        <DropdownMenuTrigger
+          disabled={
+            setProtocolId === undefined || network.protocols.length === 1
+          }
+        >
+          <div className="flex gap-2 justify-center items-center rounded-lg">
+            <LsTokenIcon name={protocol.token} />
+
+            <Typography variant="h5" fw="bold">
+              {isDerivativeVariant && LS_DERIVATIVE_TOKEN_PREFIX}
+              {protocol.token}
+            </Typography>
+
+            {setProtocolId !== undefined && network.protocols.length > 1 && (
+              <DropdownChevronIcon isLarge />
+            )}
+          </div>
+        </DropdownMenuTrigger>
+
+        <DropdownBody>
+          <ScrollArea>
+            <ul className="max-h-[300px]">
+              {network.protocols.map((protocol) => {
+                return (
+                  <li key={protocol.id}>
+                    <DropdownMenuItem onClick={trySetProtocolId(protocol.id)}>
+                      <div className="flex gap-2 items-center justify-start">
+                        <ChainIcon
+                          size="lg"
+                          name={protocol.chainIconFileName}
+                        />
+
+                        <Typography
+                          variant="h5"
+                          fw="bold"
+                          className="dark:text-mono-40"
+                        >
+                          {protocol.token}
+                        </Typography>
+                      </div>
+                    </DropdownMenuItem>
+                  </li>
+                );
+              })}
+            </ul>
+          </ScrollArea>
+        </DropdownBody>
+      </Dropdown>
+    </InputWrapper>
+  );
+};
+
+export default LsProtocolDropdownInput;
diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx
index 7b603b126..14c57d9f6 100644
--- a/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx
+++ b/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx
@@ -9,6 +9,7 @@ const PAGES_WITH_ONBOARDING: PagePath[] = [
   PagePath.LIQUID_STAKING,
   PagePath.RESTAKE,
   PagePath.NOMINATION,
+  PagePath.BRIDGE,
 ];
 
 const OnboardingHelpButton: FC = () => {
diff --git a/apps/tangle-dapp/components/PercentageInput.tsx b/apps/tangle-dapp/components/PercentageInput.tsx
new file mode 100644
index 000000000..34f3311d9
--- /dev/null
+++ b/apps/tangle-dapp/components/PercentageInput.tsx
@@ -0,0 +1,96 @@
+import BackspaceDeleteFillIcon from '@webb-tools/icons/BackspaceDeleteFillIcon';
+import { Button, Input } from '@webb-tools/webb-ui-components';
+import { FC, useCallback } from 'react';
+
+import useCustomInputValue from '../hooks/useCustomInputValue';
+import ensureError from '../utils/ensureError';
+import InputWrapper, { InputWrapperProps } from './InputWrapper';
+
+export type PercentageInputProps = {
+  id: string;
+  title: string;
+  value: number | null;
+  setValue: (newValue: number | null) => void;
+  placeholder?: string;
+  isDisabled?: boolean;
+  wrapperOverrides?: Partial<InputWrapperProps>;
+  useStandardBoundaries?: boolean;
+};
+
+const PercentageInput: FC<PercentageInputProps> = ({
+  id,
+  title,
+  value,
+  setValue: setValueOnParent,
+  placeholder,
+  isDisabled = false,
+  wrapperOverrides,
+  useStandardBoundaries = true,
+}) => {
+  const parsePercentage = useCallback(
+    (string: string) => {
+      try {
+        const parsedValue = parseFloat(string) / 100;
+
+        if (isNaN(parsedValue)) {
+          return new Error('Invalid percentage');
+        }
+
+        // Limit the value between 0 to 100% if requested.
+        // This is the most common percentage behavior.
+        return useStandardBoundaries
+          ? Math.max(0, Math.min(1, parsedValue))
+          : parsedValue;
+      } catch (error) {
+        return ensureError(error);
+      }
+    },
+    [useStandardBoundaries],
+  );
+
+  const formatPercentage = useCallback(
+    (value: number): string => (value * 100).toString(),
+    [],
+  );
+
+  const { displayValue, setDisplayValue, errorMessage, setValue } =
+    useCustomInputValue<number>({
+      setValue: setValueOnParent,
+      format: formatPercentage,
+      parse: parsePercentage,
+      suffix: '%',
+    });
+
+  const clearAction =
+    value === null ? undefined : (
+      <Button size="sm" variant="utility" onClick={() => setValue(null)}>
+        <BackspaceDeleteFillIcon className="fill-current dark:fill-current" />
+      </Button>
+    );
+
+  return (
+    <InputWrapper
+      id={id}
+      title={title}
+      isDisabled={isDisabled}
+      errorMessage={errorMessage ?? undefined}
+      actions={clearAction}
+      {...wrapperOverrides}
+    >
+      <Input
+        id={id}
+        inputClassName="placeholder:text-md"
+        type="text"
+        placeholder={placeholder}
+        size="sm"
+        autoComplete="off"
+        value={displayValue}
+        onChange={setDisplayValue}
+        isDisabled={isDisabled}
+        isControlled
+      />
+    </InputWrapper>
+  );
+};
+
+export default PercentageInput;
diff --git a/apps/tangle-dapp/components/StatItem.tsx b/apps/tangle-dapp/components/StatItem.tsx
index 8d6867a0e..c7356be65 100644
--- a/apps/tangle-dapp/components/StatItem.tsx
+++ b/apps/tangle-dapp/components/StatItem.tsx
@@ -9,7 +9,6 @@ export type StatItemProps = {
   title: string;
   subtitle: string;
   tooltip?: string;
-  largeSubtitle?: boolean;
   removeBorder?: boolean;
 };
 
@@ -17,7 +16,6 @@ const StatItem: FC<StatItemProps> = ({
   title,
   subtitle,
   tooltip,
-  largeSubtitle = false,
   removeBorder = false,
 }) => {
   const className = cx('flex flex-col items-start justify-center px-3', {
@@ -26,13 +24,13 @@ const StatItem: FC<StatItemProps> = ({
 
   return (
     <div className={className}>
-      <Typography className="dark:text-mono-0" variant="body2" fw="bold">
+      <Typography className="dark:text-mono-0" variant="body1" fw="bold">
         {title}
       </Typography>
 
       <div className="flex gap-1 items-start justify-start">
         <Typography
-          variant={largeSubtitle ? 'body1' : 'body2'}
+          variant="body2"
           fw="normal"
           className="text-mono-120 dark:text-mono-100"
         >
diff --git a/apps/tangle-dapp/components/TextInput.tsx b/apps/tangle-dapp/components/TextInput.tsx
new file mode 100644
index 000000000..0f627d572
--- /dev/null
+++ b/apps/tangle-dapp/components/TextInput.tsx
@@ -0,0 +1,57 @@
+import BackspaceDeleteFillIcon from '@webb-tools/icons/BackspaceDeleteFillIcon';
+import { Button, Input } from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
+
+import InputWrapper, { InputWrapperProps } from './InputWrapper';
+
+export type TextInputProps = {
+  id: string;
+  title: string;
+  value: string;
+  setValue: (newValue: string) => void;
+  placeholder?: string;
+  isDisabled?: boolean;
+  wrapperOverrides?: Partial<InputWrapperProps>;
+};
+
+const TextInput: FC<TextInputProps> = ({
+  id,
+  title,
+  value,
+  setValue,
+  placeholder,
+  isDisabled = false,
+  wrapperOverrides,
+}) => {
+  const clearAction =
+    value === '' ? undefined : (
+      <Button size="sm" variant="utility" onClick={() => setValue('')}>
+        <BackspaceDeleteFillIcon className="fill-current dark:fill-current" />
+      </Button>
+    );
+
+  return (
+    <InputWrapper
+      id={id}
+      title={title}
+      isDisabled={isDisabled}
+      actions={clearAction}
+      {...wrapperOverrides}
+    >
+      <Input
+        id={id}
+        inputClassName="placeholder:text-md"
+        type="text"
+        placeholder={placeholder}
+        size="sm"
+        autoComplete="off"
+        value={value}
+        onChange={setValue}
+        isDisabled={isDisabled}
+        isControlled
+      />
+    </InputWrapper>
+  );
+};
+
+export default TextInput;
diff --git a/apps/tangle-dapp/components/tables/Operators/index.tsx b/apps/tangle-dapp/components/tables/Operators/index.tsx
index c953058d8..6493e2d92 100644
--- a/apps/tangle-dapp/components/tables/Operators/index.tsx
+++ b/apps/tangle-dapp/components/tables/Operators/index.tsx
@@ -210,7 +210,7 @@ const OperatorsTable: FC<Props> = ({
     return (
       <TableStatus
         title="No operators found"
-        description="It looks like there is no operator running at the moment."
+        description="It looks like there are no operators running at the moment."
         icon="⚙️"
         {...emptyTableProps}
         className={twMerge(sharedTableStatusClxs, emptyTableProps?.className)}
diff --git a/apps/tangle-dapp/components/tables/Vaults/index.tsx b/apps/tangle-dapp/components/tables/Vaults/index.tsx
index 729642d69..22547d86c 100644
--- a/apps/tangle-dapp/components/tables/Vaults/index.tsx
+++ b/apps/tangle-dapp/components/tables/Vaults/index.tsx
@@ -177,7 +177,7 @@ const VaultsTable: FC<Props> = ({
     return (
       <TableStatus
         title="No vaults found"
-        description="It looks like there is no vaults at the moment."
+        description="It looks like there are no vaults at the moment."
         icon="🔍"
         {...emptyTableProps}
         className={twMerge(sharedTableStatusClxs, emptyTableProps?.className)}
diff --git a/apps/tangle-dapp/constants/index.ts b/apps/tangle-dapp/constants/index.ts
index 2b6cb6ad0..fdc2fc7c8 100644
--- a/apps/tangle-dapp/constants/index.ts
+++ b/apps/tangle-dapp/constants/index.ts
@@ -63,6 +63,7 @@ export enum TxName {
   LS_LIQUIFIER_WITHDRAW = 'liquifier withdraw',
   LS_TANGLE_POOL_JOIN = 'join liquid staking pool',
   LS_TANGLE_POOL_UNBOND = 'unbond from liquid staking pool',
+  LS_TANGLE_POOL_CREATE = 'create liquid staking pool',
 }
 
 export const PAYMENT_DESTINATION_OPTIONS: StakingRewardsDestinationDisplayText[] =
diff --git a/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx b/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
index ca4ebb759..e2bc81d09 100644
--- a/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
+++ b/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
@@ -13,7 +13,7 @@ import {
 import { TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/constants';
 import { type FC, useCallback, useEffect, useState } from 'react';
 
-import AmountInput from '../../components/AmountInput/AmountInput';
+import AmountInput from '../../components/AmountInput';
 import useTokenWalletFreeBalance from '../../data/NominatorStats/useTokenWalletFreeBalance';
 import useBondExtraTx from '../../data/staking/useBondExtraTx';
 import { BondMoreTxContainerProps } from './types';
@@ -92,7 +92,7 @@ const BondMoreTxContainer: FC<BondMoreTxContainerProps> = ({
             max={walletBalance?.value1 ?? undefined}
             amount={amountToBond}
             setAmount={setAmountToBond}
-            baseInputOverrides={{ isFullWidth: true }}
+            wrapperOverrides={{ isFullWidth: true }}
             maxErrorMessage="Not enough available balance"
             setErrorMessage={handleSetErrorMessage}
             isDisabled={isBondMoreTxLoading}
diff --git a/apps/tangle-dapp/containers/DelegateTxContainer/BondTokens.tsx b/apps/tangle-dapp/containers/DelegateTxContainer/BondTokens.tsx
index d1e1da597..3192a37c1 100644
--- a/apps/tangle-dapp/containers/DelegateTxContainer/BondTokens.tsx
+++ b/apps/tangle-dapp/containers/DelegateTxContainer/BondTokens.tsx
@@ -9,7 +9,7 @@ import _ from 'lodash';
 import { type FC, useCallback } from 'react';
 import z from 'zod';
 
-import AmountInput from '../../components/AmountInput/AmountInput';
+import AmountInput from '../../components/AmountInput';
 import {
   STAKING_PAYEE_TEXT_TO_VALUE_MAP,
   STAKING_PAYEE_VALUE_TO_TEXT_MAP,
@@ -77,7 +77,7 @@ const BondTokens: FC<BondTokensProps> = ({
           max={freeBalance ?? undefined}
           amount={amountToBond}
           setAmount={setAmountToBond}
-          baseInputOverrides={{ isFullWidth: true }}
+          wrapperOverrides={{ isFullWidth: true }}
           maxErrorMessage="Not enough available balance"
           setErrorMessage={handleAmountToBondError}
         />
diff --git a/apps/tangle-dapp/containers/LsCreatePoolModal.tsx b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx
new file mode 100644
index 000000000..4bbc62a8a
--- /dev/null
+++ b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx
@@ -0,0 +1,222 @@
+import { BN } from '@polkadot/util';
+import { isAddress } from '@polkadot/util-crypto';
+import {
+  Alert,
+  Button,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  TANGLE_DOCS_LS_CREATE_POOL_URL,
+} from '@webb-tools/webb-ui-components';
+import { FC, useCallback, useEffect, useState } from 'react';
+
+import AddressInput, { AddressType } from '../components/AddressInput';
+import AmountInput from '../components/AmountInput';
+import LsProtocolDropdownInput from '../components/LiquidStaking/LsProtocolDropdownInput';
+import TextInput from '../components/TextInput';
+import { LsNetworkId, LsProtocolId } from '../constants/liquidStaking/types';
+import useBalances from '../data/balances/useBalances';
+import useLsCreatePoolTx from '../data/liquidStaking/tangle/useLsCreatePoolTx';
+import { useLsStore } from '../data/liquidStaking/useLsStore';
+import useSubstrateAddress from '../hooks/useSubstrateAddress';
+import { TxStatus } from '../hooks/useSubstrateTx';
+import assertSubstrateAddress from '../utils/assertSubstrateAddress';
+import getLsNetwork from '../utils/liquidStaking/getLsNetwork';
+import { ERROR_NOT_ENOUGH_BALANCE } from './ManageProfileModalContainer/Independent/IndependentAllocationInput';
+
+export type LsCreatePoolModalProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+const LsCreatePoolModal: FC<LsCreatePoolModalProps> = ({
+  isOpen,
+  setIsOpen,
+}) => {
+  const activeSubstrateAddress = useSubstrateAddress();
+  // TODO: Use form validation for the properties/inputs.
+  const [name, setName] = useState('');
+  const { free: freeBalance } = useBalances();
+  const [rootAddress, setRootAddress] = useState('');
+  const [nominatorAddress, setNominatorAddress] = useState('');
+  const [bouncerAddress, setBouncerAddress] = useState('');
+
+  const [initialBondAmount, setInitialBondAmount] = useState<BN | null>(null);
+  const [protocolId, setProtocolId] = useState<LsProtocolId | null>(null);
+  const { lsNetworkId } = useLsStore();
+
+  const lsNetwork = getLsNetwork(lsNetworkId);
+
+  // TODO: Also add Restaking Parachain when its non-testnet version is available.
+  const isLiveNetwork = lsNetworkId === LsNetworkId.TANGLE_MAINNET;
+
+  const { execute, status } = useLsCreatePoolTx();
+
+  const isSubstrateAddresses =
+    isAddress(rootAddress) &&
+    isAddress(nominatorAddress) &&
+    isAddress(bouncerAddress);
+
+  const handleCreatePoolClick = useCallback(async () => {
+    if (
+      initialBondAmount === null ||
+      !isSubstrateAddresses ||
+      execute === null
+    ) {
+      return;
+    }
+
+    await execute({
+      name,
+      initialBondAmount,
+      rootAddress: assertSubstrateAddress(rootAddress),
+      nominatorAddress: assertSubstrateAddress(nominatorAddress),
+      bouncerAddress: assertSubstrateAddress(bouncerAddress),
+    });
+  }, [
+    bouncerAddress,
+    execute,
+    initialBondAmount,
+    isSubstrateAddresses,
+    name,
+    nominatorAddress,
+    rootAddress,
+  ]);
+
+  // When the active address changes and it is set,
+  // update the address inputs with the user's address
+  // as the default value.
+  useEffect(() => {
+    if (activeSubstrateAddress !== null) {
+      setRootAddress(activeSubstrateAddress);
+      setNominatorAddress(activeSubstrateAddress);
+      setBouncerAddress(activeSubstrateAddress);
+    }
+  }, [activeSubstrateAddress]);
+
+  // Automatically close the modal when the transaction
+  // is successful.
+  useEffect(() => {
+    if (status === TxStatus.COMPLETE) {
+      setIsOpen(false);
+    }
+  }, [setIsOpen, status]);
+
+  return (
+    <Modal open={isOpen}>
+      <ModalContent isCenter isOpen={isOpen} className="w-full max-w-[740px]">
+        <ModalHeader onClose={() => setIsOpen(false)}>
+          Create a Liquid Staking Pool
+        </ModalHeader>
+
+        <div className="p-9 space-y-8">
+          <div className="flex flex-col items-stretch justify-center 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 items-center justify-stretch gap-2">
+              <TextInput
+                id="ls-create-pool-name"
+                title="Pool Name"
+                placeholder="Choose a name"
+                value={name}
+                setValue={setName}
+                wrapperOverrides={{ isFullWidth: true }}
+              />
+
+              <LsProtocolDropdownInput
+                id="ls-create-pool-protocol"
+                networkId={lsNetworkId}
+                protocolId={protocolId ?? lsNetwork.defaultProtocolId}
+                setProtocolId={setProtocolId}
+                isDerivativeVariant={false}
+              />
+            </div>
+
+            {/** TODO: Protocol selection dropdown. */}
+
+            <AmountInput
+              id="ls-create-pool-initial-bond-amount"
+              amount={initialBondAmount}
+              setAmount={setInitialBondAmount}
+              max={freeBalance}
+              maxErrorMessage={ERROR_NOT_ENOUGH_BALANCE}
+              title="Initial Bond Amount"
+              wrapperClassName="w-full"
+              wrapperOverrides={{ isFullWidth: true }}
+            />
+
+            <AddressInput
+              id="ls-create-pool-root-address"
+              title="Root Address"
+              tooltip="The root is the administrator of the pool with full control over its operations, including updating roles, and commission setup"
+              type={AddressType.Substrate}
+              value={rootAddress}
+              setValue={setRootAddress}
+              wrapperOverrides={{ isFullWidth: true }}
+            />
+
+            <AddressInput
+              id="ls-create-pool-nominator-address"
+              title="Nominator Address"
+              tooltip="The nominator is responsible for selecting validators on behalf of the pool. Their role is critical in optimizing rewards for the pool members by choosing high-performing and secure validators."
+              type={AddressType.Substrate}
+              value={nominatorAddress ?? ''}
+              setValue={setNominatorAddress}
+              wrapperOverrides={{ isFullWidth: true }}
+            />
+
+            <AddressInput
+              id="ls-create-pool-bouncer-address"
+              title="Bouncer Address"
+              tooltip="The bouncer is responsible for managing the entry and exit of participants into the pool. They can block or allow participants, as well as manage pool access settings."
+              type={AddressType.Substrate}
+              value={bouncerAddress ?? ''}
+              setValue={setBouncerAddress}
+              wrapperOverrides={{ isFullWidth: true }}
+            />
+          </div>
+        </div>
+
+        <ModalFooter className="flex items-center gap-2">
+          <Button
+            isFullWidth
+            variant="secondary"
+            target="_blank"
+            href={TANGLE_DOCS_LS_CREATE_POOL_URL}
+          >
+            Learn More
+          </Button>
+
+          <Button
+            isDisabled={
+              !isSubstrateAddresses ||
+              activeSubstrateAddress === null ||
+              initialBondAmount === null ||
+              name === '' ||
+              execute === null
+            }
+            onClick={handleCreatePoolClick}
+            isLoading={execute === null || status === TxStatus.PROCESSING}
+            loadingText="Processing"
+            isFullWidth
+          >
+            Create Pool
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LsCreatePoolModal;
diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx
index bc07f08a6..5a6ef6a69 100644
--- a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx
+++ b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx
@@ -120,7 +120,9 @@ const LsPoolsTable: FC<LsPoolsTableProps> = ({ pools, isShown }) => {
             isDisabled={lsPoolId === props.row.original.id}
             onClick={() => setLsStakingIntent(props.row.original.id, true)}
             rightIcon={
-              lsPoolId !== props.row.original.id ? <ArrowRight /> : undefined
+              lsPoolId !== props.row.original.id ? (
+                <ArrowRight className="fill-current dark:fill-current" />
+              ) : undefined
             }
             variant="utility"
             size="sm"
diff --git a/apps/tangle-dapp/containers/ManageProfileModalContainer/Independent/IndependentAllocationInput.tsx b/apps/tangle-dapp/containers/ManageProfileModalContainer/Independent/IndependentAllocationInput.tsx
index ac1d26013..d0043ef55 100644
--- a/apps/tangle-dapp/containers/ManageProfileModalContainer/Independent/IndependentAllocationInput.tsx
+++ b/apps/tangle-dapp/containers/ManageProfileModalContainer/Independent/IndependentAllocationInput.tsx
@@ -4,7 +4,7 @@ import { Close, LockLineIcon } from '@webb-tools/icons';
 import { Chip, Input, SkeletonLoader } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useMemo, useState } from 'react';
 
-import BaseInput from '../../../components/AmountInput/BaseInput';
+import InputWrapper from '../../../components/InputWrapper';
 import useNetworkStore from '../../../context/useNetworkStore';
 import useInputAmount from '../../../hooks/useInputAmount';
 import { RestakingService } from '../../../types';
@@ -150,7 +150,7 @@ const IndependentAllocationInput: FC<IndependentAllocationInputProps> = ({
   const hasDropdownBody = !hasActiveJob && setService !== undefined;
 
   return (
-    <BaseInput
+    <InputWrapper
       id={id}
       isDropdownVisible={isDropdownVisible}
       setIsDropdownVisible={setIsDropdownVisible}
@@ -177,7 +177,7 @@ const IndependentAllocationInput: FC<IndependentAllocationInputProps> = ({
         isReadOnly={availableBalance === null}
         isControlled
       />
-    </BaseInput>
+    </InputWrapper>
   );
 };
 
diff --git a/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedAmountInput.tsx b/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedAmountInput.tsx
index 03c20493e..518f13e43 100644
--- a/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedAmountInput.tsx
+++ b/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedAmountInput.tsx
@@ -3,7 +3,7 @@ import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config/constants/tangle'
 import { Button, Input } from '@webb-tools/webb-ui-components';
 import { FC, useRef } from 'react';
 
-import BaseInput from '../../../components/AmountInput/BaseInput';
+import InputWrapper from '../../../components/InputWrapper';
 import useNetworkStore from '../../../context/useNetworkStore';
 import useInputAmount from '../../../hooks/useInputAmount';
 import {
@@ -58,7 +58,7 @@ const SharedAmountInput: FC<SharedAmountInputProps> = ({
   ];
 
   return (
-    <BaseInput
+    <InputWrapper
       id={id}
       title={title}
       actions={actions}
@@ -77,7 +77,7 @@ const SharedAmountInput: FC<SharedAmountInputProps> = ({
         isInvalid={errorMessage !== null}
         isControlled
       />
-    </BaseInput>
+    </InputWrapper>
   );
 };
 
diff --git a/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedRolesInput.tsx b/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedRolesInput.tsx
index dee9b459f..9aa9c9cd1 100644
--- a/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedRolesInput.tsx
+++ b/apps/tangle-dapp/containers/ManageProfileModalContainer/Shared/SharedRolesInput.tsx
@@ -3,7 +3,7 @@ import { CheckBox, Chip, Typography } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import BaseInput from '../../../components/AmountInput/BaseInput';
+import InputWrapper from '../../../components/InputWrapper';
 import { RestakingService } from '../../../types';
 import {
   getChartDataAreaColorByServiceType,
@@ -110,7 +110,7 @@ const SharedRolesInput: FC<SharedRolesInputProps> = ({
   );
 
   return (
-    <BaseInput
+    <InputWrapper
       title={title}
       id={id}
       dropdownBody={dropdownBody}
@@ -147,7 +147,7 @@ const SharedRolesInput: FC<SharedRolesInputProps> = ({
           Select Role(s)
         </Chip>
       )}
-    </BaseInput>
+    </InputWrapper>
   );
 };
 
diff --git a/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx b/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
index c1d88268e..4b876affd 100644
--- a/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
+++ b/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
@@ -13,7 +13,7 @@ import { TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/constant
 import { type FC, useCallback, useState } from 'react';
 
 import { BondedTokensBalanceInfo } from '../../components';
-import AmountInput from '../../components/AmountInput/AmountInput';
+import AmountInput from '../../components/AmountInput';
 import useUnbondedAmount from '../../data/NominatorStats/useUnbondedAmount';
 import useUnbondingAmount from '../../data/NominatorStats/useUnbondingAmount';
 import useRebondTx from '../../data/staking/useRebondTx';
@@ -87,7 +87,7 @@ const RebondTxContainer: FC<RebondTxContainerProps> = ({
             max={totalUnbondingAmount?.value ?? undefined}
             amount={amountToRebond}
             setAmount={setAmountToRebond}
-            baseInputOverrides={{ isFullWidth: true }}
+            wrapperOverrides={{ isFullWidth: true }}
             maxErrorMessage="Not enough unbonding balance"
             setErrorMessage={handleSetErrorMessage}
             isDisabled={rebondTxStatus === TxStatus.PROCESSING}
diff --git a/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx b/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
index ea4ba775a..0ae502194 100644
--- a/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
+++ b/apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx
@@ -23,10 +23,8 @@ import {
 } from 'react';
 import { isHex } from 'viem';
 
-import AddressInput, {
-  AddressType,
-} from '../../components/AddressInput/AddressInput';
-import AmountInput from '../../components/AmountInput/AmountInput';
+import AddressInput, { AddressType } from '../../components/AddressInput';
+import AmountInput from '../../components/AmountInput';
 import useNetworkStore from '../../context/useNetworkStore';
 import useBalances from '../../data/balances/useBalances';
 import useExistentialDeposit from '../../data/balances/useExistentialDeposit';
@@ -211,7 +209,7 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
               isDisabled={!isReady}
               amount={amount}
               setAmount={setAmount}
-              baseInputOverrides={{
+              wrapperOverrides={{
                 isFullWidth: true,
                 tooltip: transferableBalanceTooltip,
               }}
@@ -228,7 +226,7 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
               type={AddressType.Both}
               title="Receiver Address"
               placeholder="EVM or Substrate"
-              baseInputOverrides={{ isFullWidth: true }}
+              wrapperOverrides={{ isFullWidth: true }}
               value={receiverAddress}
               setValue={setReceiverAddress}
               isDisabled={!isReady}
diff --git a/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx b/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
index e3cee09a2..a8a91769c 100644
--- a/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
+++ b/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
@@ -13,7 +13,7 @@ import {
 import { TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/constants';
 import { type FC, useCallback, useMemo, useState } from 'react';
 
-import AmountInput from '../../components/AmountInput/AmountInput';
+import AmountInput from '../../components/AmountInput';
 import useNetworkStore from '../../context/useNetworkStore';
 import useTotalStakedAmountSubscription from '../../data/NominatorStats/useTotalStakedAmountSubscription';
 import useUnbondingAmount from '../../data/NominatorStats/useUnbondingAmount';
@@ -124,7 +124,7 @@ const UnbondTxContainer: FC<UnbondTxContainerProps> = ({
             max={remainingStakedBalanceToUnbond}
             amount={amount}
             setAmount={setAmount}
-            baseInputOverrides={{ isFullWidth: true }}
+            wrapperOverrides={{ isFullWidth: true }}
             maxErrorMessage="Not enough staked balance"
             setErrorMessage={handleSetErrorMessage}
             isDisabled={unbondTxStatus === TxStatus.PROCESSING}
diff --git a/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts b/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts
new file mode 100644
index 000000000..bcbaab882
--- /dev/null
+++ b/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts
@@ -0,0 +1,51 @@
+import { BN } from '@polkadot/util';
+import { useCallback } from 'react';
+
+import { TxName } from '../../../constants';
+import {
+  SubstrateTxFactory,
+  useSubstrateTxWithNotification,
+} from '../../../hooks/useSubstrateTx';
+import { SubstrateAddress } from '../../../types/utils';
+
+export type LsCreatePoolTxContext = {
+  name: string;
+  initialBondAmount: BN;
+  rootAddress: SubstrateAddress;
+  nominatorAddress: SubstrateAddress;
+  bouncerAddress: SubstrateAddress;
+};
+
+const useLsCreatePoolTx = () => {
+  const substrateTxFactory: SubstrateTxFactory<LsCreatePoolTxContext> =
+    useCallback(
+      async (
+        api,
+        _activeSubstrateAddress,
+        {
+          name,
+          initialBondAmount,
+          rootAddress,
+          nominatorAddress,
+          bouncerAddress,
+        },
+      ) => {
+        return api.tx.lst.create(
+          initialBondAmount,
+          rootAddress,
+          nominatorAddress,
+          bouncerAddress,
+          name,
+        );
+      },
+      [],
+    );
+
+  // TODO: Add EVM support once precompile(s) for the `lst` pallet are implemented on Tangle.
+  return useSubstrateTxWithNotification(
+    TxName.LS_TANGLE_POOL_CREATE,
+    substrateTxFactory,
+  );
+};
+
+export default useLsCreatePoolTx;
diff --git a/apps/tangle-dapp/hooks/useCustomInputValue.ts b/apps/tangle-dapp/hooks/useCustomInputValue.ts
new file mode 100644
index 000000000..067aad35a
--- /dev/null
+++ b/apps/tangle-dapp/hooks/useCustomInputValue.ts
@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import cleanNumericInputString from '../utils/cleanNumericInputString';
+
+export type CustomInputValueProps<T> = {
+  value?: T | null;
+  isNumericDecimal?: boolean;
+  suffix?: string;
+  setValue: (newValue: T | null) => void;
+  parse: (string: string) => T | Error;
+  format: (value: T) => string;
+};
+
+const END_ZEROES_REGEX = /\.0+$/;
+
+function useCustomInputValue<T>({
+  value: initialValue,
+  isNumericDecimal = true,
+  suffix,
+  setValue: setValueOnConsumer,
+  parse,
+  format,
+}: CustomInputValueProps<T>) {
+  const formatDisplayValue = useCallback(
+    (value: T | null) => {
+      if (value === null) {
+        return '';
+      }
+
+      return `${format(value)}${suffix ?? ''}`;
+    },
+    [format, suffix],
+  );
+
+  const [displayValue, setDisplayValue] = useState<string>(
+    formatDisplayValue(initialValue ?? null),
+  );
+
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // Attempt to parse the display value once the input's value
+  // changes.
+  useEffect(() => {
+    if (displayValue === '') {
+      return;
+    }
+
+    const suffixLength = suffix?.length ?? 0;
+
+    const displayValueMinusSuffix = displayValue.substring(
+      0,
+      displayValue.length - suffixLength,
+    );
+
+    const cleanDisplayValue = isNumericDecimal
+      ? cleanNumericInputString(displayValue)
+      : displayValueMinusSuffix;
+
+    // Edge cases when parsing numeric decimal values.
+    if (isNumericDecimal) {
+      // Let the user type the decimal digits before attempting to
+      // parse the value.
+      if (cleanDisplayValue.endsWith('.')) {
+        return;
+      }
+      // Special case to allow for values like `1.0001` without immediately
+      // parsing it as `1.0` -> `1`.
+      else if (END_ZEROES_REGEX.test(cleanDisplayValue)) {
+        return;
+      }
+    }
+
+    const parsedValue = parse(cleanDisplayValue);
+
+    if (parsedValue instanceof Error) {
+      setErrorMessage(parsedValue.message);
+    } else {
+      setErrorMessage(null);
+      setValueOnConsumer(parsedValue);
+      setDisplayValue(formatDisplayValue(parsedValue));
+    }
+  }, [
+    format,
+    formatDisplayValue,
+    displayValue,
+    isNumericDecimal,
+    parse,
+    setDisplayValue,
+    setValueOnConsumer,
+    suffix,
+  ]);
+
+  const setValue = useCallback(
+    (newValue: T | null) => {
+      setValueOnConsumer(newValue);
+
+      if (newValue === null) {
+        setDisplayValue('');
+        setErrorMessage(null);
+      } else {
+        setDisplayValue(formatDisplayValue(newValue));
+      }
+    },
+    [setValueOnConsumer, formatDisplayValue],
+  );
+
+  return {
+    displayValue,
+    setDisplayValue,
+    setValue,
+    errorMessage,
+  };
+}
+
+export default useCustomInputValue;
diff --git a/apps/tangle-dapp/hooks/useInputAmount.ts b/apps/tangle-dapp/hooks/useInputAmount.ts
index 90fac09da..f403f746b 100644
--- a/apps/tangle-dapp/hooks/useInputAmount.ts
+++ b/apps/tangle-dapp/hooks/useInputAmount.ts
@@ -1,6 +1,7 @@
 import { BN } from '@polkadot/util';
 import { useCallback, useEffect, useState } from 'react';
 
+import cleanNumericInputString from '../utils/cleanNumericInputString';
 import formatBn, { FormatOptions } from '../utils/formatBn';
 import parseChainUnits, {
   ChainUnitParsingError,
@@ -73,21 +74,7 @@ const useInputAmount = ({
 
   const handleChange = useCallback(
     (newAmountString: string) => {
-      let wasPeriodSeen = false;
-
-      const cleanAmountString = newAmountString
-        .split('')
-        .filter((char) => {
-          if (char === '.' && !wasPeriodSeen) {
-            wasPeriodSeen = true;
-
-            return true;
-          }
-
-          // Only consider digits. Ignore any other characters.
-          return char.match(/\d/);
-        })
-        .join('');
+      const cleanAmountString = cleanNumericInputString(newAmountString);
 
       // Nothing to do.
       if (displayAmount === cleanAmountString) {
diff --git a/apps/tangle-dapp/hooks/useTxNotification.tsx b/apps/tangle-dapp/hooks/useTxNotification.tsx
index f4b5e522a..67f7e773e 100644
--- a/apps/tangle-dapp/hooks/useTxNotification.tsx
+++ b/apps/tangle-dapp/hooks/useTxNotification.tsx
@@ -38,6 +38,7 @@ const SUCCESS_MESSAGES: Record<TxName, string> = {
   [TxName.LS_LIQUIFIER_WITHDRAW]: 'Liquifier withdrawal successful',
   [TxName.LS_TANGLE_POOL_JOIN]: 'Joined liquid staking pool',
   [TxName.LS_TANGLE_POOL_UNBOND]: 'Unbonded from liquid staking pool',
+  [TxName.LS_TANGLE_POOL_CREATE]: 'Created liquid staking pool',
 };
 
 const makeKey = (txName: TxName): `${TxName}-tx-notification` =>
diff --git a/apps/tangle-dapp/utils/cleanNumericInputString.ts b/apps/tangle-dapp/utils/cleanNumericInputString.ts
new file mode 100644
index 000000000..aa8cef6ed
--- /dev/null
+++ b/apps/tangle-dapp/utils/cleanNumericInputString.ts
@@ -0,0 +1,19 @@
+const cleanNumericInputString = (input: string): string => {
+  let wasPeriodSeen = false;
+
+  return input
+    .split('')
+    .filter((char) => {
+      if (char === '.' && !wasPeriodSeen) {
+        wasPeriodSeen = true;
+
+        return true;
+      }
+
+      // Only consider digits. Ignore any other characters.
+      return /\d/.test(char);
+    })
+    .join('');
+};
+
+export default cleanNumericInputString;
diff --git a/libs/icons/src/AddLineIcon.tsx b/libs/icons/src/AddLineIcon.tsx
new file mode 100644
index 000000000..8e9f3f3e6
--- /dev/null
+++ b/libs/icons/src/AddLineIcon.tsx
@@ -0,0 +1,11 @@
+import { createIcon } from './create-icon';
+import { IconBase } from './types';
+
+export const AddLineIcon = (props: IconBase) => {
+  return createIcon({
+    ...props,
+    viewBox: '0 0 16 16',
+    d: 'M7.33398 7.33203V3.33203H8.66732V7.33203H12.6673V8.66536H8.66732V12.6654H7.33398V8.66536H3.33398V7.33203H7.33398Z',
+    displayName: 'AddLineIcon',
+  });
+};
diff --git a/libs/icons/src/BackspaceDeleteFillIcon.tsx b/libs/icons/src/BackspaceDeleteFillIcon.tsx
new file mode 100644
index 000000000..4b3d9f7df
--- /dev/null
+++ b/libs/icons/src/BackspaceDeleteFillIcon.tsx
@@ -0,0 +1,13 @@
+import { createIcon } from './create-icon';
+import { IconBase } from './types';
+
+const BackspaceDeleteFillIcon = (props: IconBase) => {
+  return createIcon({
+    ...props,
+    viewBox: '0 0 24 24',
+    d: 'M6.53451 3H20.9993C21.5516 3 21.9993 3.44772 21.9993 4V20C21.9993 20.5523 21.5516 21 20.9993 21H6.53451C6.20015 21 5.88792 20.8329 5.70246 20.5547L0.369122 12.5547C0.145189 12.2188 0.145189 11.7812 0.369122 11.4453L5.70246 3.4453C5.88792 3.1671 6.20015 3 6.53451 3ZM12.9993 10.5858L10.1709 7.75736L8.75668 9.17157L11.5851 12L8.75668 14.8284L10.1709 16.2426L12.9993 13.4142L15.8277 16.2426L17.242 14.8284L14.4135 12L17.242 9.17157L15.8277 7.75736L12.9993 10.5858Z',
+    displayName: 'BackspaceDeleteFillIcon',
+  });
+};
+
+export default BackspaceDeleteFillIcon;
diff --git a/libs/icons/src/create-icon.tsx b/libs/icons/src/create-icon.tsx
index 68fb271af..0d7929c72 100644
--- a/libs/icons/src/create-icon.tsx
+++ b/libs/icons/src/create-icon.tsx
@@ -60,7 +60,7 @@ export function createIcon(options: CreateIconOptions) {
   const path_ = Children.toArray(path);
   const size_ = getIconSizeInPixel(size);
 
-  const className_ = colorUsingStroke
+  const colorClassName = colorUsingStroke
     ? getStrokeColor(darkMode)
     : getFillColor(darkMode);
 
@@ -76,7 +76,7 @@ export function createIcon(options: CreateIconOptions) {
       height={size_}
       style={{ minWidth: size_, minHeight: size_ }}
       className={twMerge(
-        className_,
+        colorClassName,
         colorUsingStroke ? 'fill-transparent' : 'stroke-transparent',
         minSizeClassName,
         className,
diff --git a/libs/icons/src/index.ts b/libs/icons/src/index.ts
index 9c10df054..7ffc514ec 100644
--- a/libs/icons/src/index.ts
+++ b/libs/icons/src/index.ts
@@ -151,6 +151,8 @@ export { default as WebbLogoIcon } from './WebbLogoIcon';
 export * from './YouTubeFill';
 export * from './SubtractCircleLineIcon';
 export * from './ArrowDownIcon';
+export * from './AddLineIcon';
+export * from './BackspaceDeleteFillIcon';
 
 // Wallet icons
 export * from './wallets';
diff --git a/libs/webb-ui-components/src/components/Input/Input.tsx b/libs/webb-ui-components/src/components/Input/Input.tsx
index 9d7d75c0a..af3e30c4e 100644
--- a/libs/webb-ui-components/src/components/Input/Input.tsx
+++ b/libs/webb-ui-components/src/components/Input/Input.tsx
@@ -163,7 +163,7 @@ export const Input: React.FC<InputProps> = (props) => {
               inputClsxDisabled,
             )
           : cx(
-              `border-none w-full bg-transparent focus:ring-0 p-0 h4 leading-[30px] font-bold`,
+              `border-none w-full bg-transparent focus:ring-0 p-0 h5 leading-[30px] font-bold`,
               'text-mono-200 dark:text-mono-0',
             ),
         inputClassName,
diff --git a/libs/webb-ui-components/src/constants/index.ts b/libs/webb-ui-components/src/constants/index.ts
index c45406383..e17f088c9 100644
--- a/libs/webb-ui-components/src/constants/index.ts
+++ b/libs/webb-ui-components/src/constants/index.ts
@@ -44,6 +44,8 @@ export const TANGLE_DOCS_STAKING_URL =
   'https://docs.tangle.tools/restake/staking-intro';
 export const TANGLE_DOCS_LIQUID_STAKING_URL =
   'https://docs.tangle.tools/restake/lst-concepts';
+export const TANGLE_DOCS_LS_CREATE_POOL_URL =
+  'https://docs.tangle.tools/restake/lst-pool-create#introduction-to-liquid-staking-pools';
 export const TANGLE_DOCS_RESTAKING_URL =
   'https://docs.tangle.tools/restake/restake-introduction';
 export const TANGLE_GITHUB_URL = 'https://github.com/webb-tools/tangle';