diff --git a/src/components/Wallet/modals/DisconnectModal/index.tsx b/src/components/Wallet/modals/DisconnectModal/index.tsx
index 6c732172..3db2f292 100644
--- a/src/components/Wallet/modals/DisconnectModal/index.tsx
+++ b/src/components/Wallet/modals/DisconnectModal/index.tsx
@@ -8,7 +8,7 @@ import { getAddressForFormat } from '../../../../helpers/addressFormatter';
 import { useNodeInfoState } from '../../../../NodeInfoProvider';
 import { useAccountBalance } from '../../../../shared/useAccountBalance';
 import { useGlobalState } from '../../../../GlobalStateProvider';
-import { CopyableAddress } from '../../../PublicKey';
+import { CopyablePublicKey } from '../../../PublicKey/CopyablePublicKey';
 import { Skeleton } from '../../../Skeleton';
 
 interface WalletButtonProps {
@@ -23,18 +23,18 @@ const WalletButton = ({ wallet, query, balance, tokenSymbol, walletAccount }: Wa
   <Button
     size="sm"
     color="ghost"
-    className="text-sm border-base-300 border-1 bg-base-200 min-h-[2.1rem] h-auto px-5 sm:px-3 overflow-hidden ellipsis max-w36 sm:max-w-fit"
+    className="border-1 ellipsis max-w36 h-auto min-h-[2.1rem] overflow-hidden border-base-300 bg-base-200 px-5 text-sm sm:max-w-fit sm:px-3"
     title={wallet?.title}
     type="button"
   >
     {query.isLoading ? (
-      <Skeleton className="bg-[rgba(0,0,0,.06)] px-2 py-1 mr-2 hidden sm:flex">10000.00 TKN</Skeleton>
+      <Skeleton className="mr-2 hidden bg-[rgba(0,0,0,.06)] px-2 py-1 sm:flex">10000.00 TKN</Skeleton>
     ) : (
-      <span className="items-center bg-[rgba(0,0,0,.06)] px-2 py-0.5 mr-2 rounded-lg hidden sm:flex">
+      <span className="mr-2 hidden items-center rounded-lg bg-[rgba(0,0,0,.06)] px-2 py-0.5 sm:flex">
         {balance} {tokenSymbol}
       </span>
     )}
-    <p className="hidden sm:block truncate">{walletAccount?.name}</p>
+    <p className="hidden truncate sm:block">{walletAccount?.name}</p>
     <img src={wallet?.logo?.src || ''} className="w-[20px] sm:ml-2" alt={wallet?.logo?.alt || ''} />
   </Button>
 );
@@ -56,10 +56,10 @@ const WalletDropdownMenu = ({
   tokenSymbol,
   removeWalletAccount,
 }: WalletDropdownMenuProps) => (
-  <Dropdown.Menu className="text-center border border-base-300 bg-base-200 shadow-lg min-w-[240px] p-3 mt-2 right-0">
+  <Dropdown.Menu className="right-0 mt-2 min-w-[240px] border border-base-300 bg-base-200 p-3 text-center shadow-lg">
     <div className="text-sm text-neutral-400">{walletAccount?.name}</div>
     <div className="text-neutral-500">
-      <CopyableAddress
+      <CopyablePublicKey
         publicKey={ss58Format ? getAddressForFormat(address, ss58Format) : address}
         variant="short"
         inline={true}
diff --git a/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx b/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx
index a1c8ea4b..237fbf26 100644
--- a/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx
+++ b/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx
@@ -1,7 +1,7 @@
-import { useMemo } from 'preact/compat';
+import { useMemo } from 'preact/hooks';
 import { Button, Divider } from 'react-daisyui';
 
-import { CopyableAddress, PublicKey } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import TransferCountdown from '../../../../components/TransferCountdown';
 import { convertCurrencyToStellarAsset, deriveShortenedRequestId } from '../../../../helpers/spacewalk';
 import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
@@ -67,17 +67,17 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
           <div className="text-xl">
             Send {totalAmount} {asset?.getCode()}
           </div>
-          <div className="text-sm">
+          <div className="flex items-center justify-center text-sm">
             {asset && asset.getIssuer() && (
               <>
-                issued by <PublicKey variant="short" publicKey={asset?.getIssuer()} />
+                <p>issued by</p> <CopyablePublicKey variant="short" publicKey={asset?.getIssuer()} />
               </>
             )}
           </div>
-          <div className="text mt-4">With the text memo</div>
-          {issueRequest && <CopyableAddress variant="short" publicKey={expectedStellarMemo} />}
-          <div className="text mt-4">In a single transaction to</div>
-          <CopyableAddress variant="short" publicKey={destination} />
+          <div className="mt-4 text">With the text memo</div>
+          {issueRequest && <CopyablePublicKey variant="short" publicKey={expectedStellarMemo} />}
+          <div className="mt-4 text">In a single transaction to</div>
+          <CopyablePublicKey variant="short" publicKey={destination} />
 
           <StellarUriScheme transactionURIScheme={transactionURIScheme} />
 
@@ -93,7 +93,7 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
           )}
         </div>
 
-        <div className="text-sm mt-4">Note:</div>
+        <div className="mt-4 text-sm">Note:</div>
         <ul className="text-sm list-disc list-inside">
           <li className="mt-1">
             Stellar transactions require memos for accurate processing. Failure to include the transaction memo may
diff --git a/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx b/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx
index de7f244c..03a895a4 100644
--- a/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx
+++ b/src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx
@@ -19,7 +19,7 @@ export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
   const content = useMemo(
     () => (
       <div className="text-center">
-        <div className="flex mt-4 align-center">
+        <div className="align-center mt-4 flex">
           <Checkbox
             size="sm"
             color="success"
@@ -28,13 +28,13 @@ export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
                 setManualVaultSelection(e.target.checked);
               }
             }}
-            className="rounded checkbox"
+            className="checkbox rounded"
             checked={manualVaultSelection}
           />
           <span className="ml-2">Manually select vault</span>
         </div>
         {manualVaultSelection && vaultsForCurrency && (
-          <div className="flex flex-col items-start justify-start mt-4">
+          <div className="mt-4 flex flex-col items-start justify-start">
             <div>Select Vault</div>
             <VaultSelector
               vaults={vaultsForCurrency}
@@ -46,7 +46,14 @@ export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
         )}
       </div>
     ),
-    [manualVaultSelection, vaultsForCurrency, setSelectedVault, selectedVault, setManualVaultSelection],
+    [
+      manualVaultSelection,
+      vaultsForCurrency,
+      setSelectedVault,
+      selectedVault,
+      bridgeDirection,
+      setManualVaultSelection,
+    ],
   );
 
   const actions = useMemo(
diff --git a/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx b/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx
index 5ad69de2..7eb533fa 100644
--- a/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx
+++ b/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx
@@ -1,12 +1,12 @@
 import { Button } from 'react-daisyui';
 import { useNavigate } from 'react-router-dom';
+import { useMemo } from 'preact/hooks';
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import { PublicKey } from '../../../../components/PublicKey';
 import { convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
 import { RichRedeemRequest } from '../../../../hooks/spacewalk/useRedeemPallet';
 import { nativeStellarToDecimal } from '../../../../shared/parseNumbers/metric';
 import { Dialog } from '../../../../components/Dialog';
-import { useMemo } from 'preact/hooks';
 import { PENDULUM_SUPPORT_CHAT_URL } from '../../../../shared/constants';
 import { PAGES_PATHS } from '../../../../app';
 
@@ -33,14 +33,14 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
             You will receive {totalAmount} {asset?.getCode()}
           </div>
           {asset && asset.getIssuer() && (
-            <>
-              issued by <PublicKey variant="short" publicKey={asset?.getIssuer()} />
-            </>
+            <div className="flex items-center justify-center text-sm">
+              <div>issued by</div> <PublicKey variant="short" publicKey={asset?.getIssuer()} />
+            </div>
           )}
-          <div className="text-sm mt-4">Your request is being processed</div>
+          <div className="mt-4 text-sm">Your request is being processed</div>
         </div>
         <div className="mt-6">
-          <div className="text-sm mt-2 text-center">
+          <div className="mt-2 text-sm text-center">
             This typically takes only a few minutes. Contact
             <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
               support
diff --git a/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx b/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx
index e5866229..9cd9bd3a 100644
--- a/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx
+++ b/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx
@@ -4,7 +4,7 @@ import { JSXInternal } from 'preact/src/jsx';
 import { Divider } from 'react-daisyui';
 
 import { useGlobalState } from '../../../../GlobalStateProvider';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { deriveShortenedRequestId } from '../../../../helpers/spacewalk';
 import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
 import { toTitle } from '../../../../helpers/string';
@@ -74,14 +74,14 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
       <div className="flex flex-col items-center justify-between">
         {statusIcon}
         <div className="mt-5" />
-        <h1 className="text-2xl transfer-dialog-contrast-text font-semibold mb-1">{title}</h1>
+        <h1 className="transfer-dialog-contrast-text mb-1 text-2xl font-semibold">{title}</h1>
         {content}
         <Divider className="mx-5 mb-2 mt-1" />
         <div
           id="details"
           tabIndex={0}
           onClick={toggle}
-          className={`collapse collapse-arrow rounded-lg bg-black bg-opacity-3 transfer-dialog-text flex flex-col w-11/12 ${collapseVisibility}`}
+          className={`transfer-dialog-text collapse collapse-arrow flex w-11/12 flex-col rounded-lg bg-black bg-opacity-3 ${collapseVisibility}`}
         >
           <div className="collapse-title flex flex-row justify-between">
             <div className="text-sm">Bridge fee</div>
@@ -90,18 +90,18 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
           <div className="collapse-content space-y-4">
             <div className="flex flex-row justify-between">
               <div className="text-sm">Destination Address (Stellar)</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p0"
+                className="p0 text-sm"
                 variant="short"
                 publicKey={destinationStellarAddress}
               />
             </div>
             <div className="flex flex-row justify-between">
               <div className="text-sm">Vault Address ({tenantNameCapitalized})</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p-0"
+                className="p-0 text-sm"
                 variant="short"
                 publicKey={transfer.original.vault.accountId.toString()}
               />
@@ -109,9 +109,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {vaultStellarPublicKey && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Vault Address (Stellar)</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={vaultStellarPublicKey}
                 />
@@ -120,9 +120,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {showMemo && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Memo</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={expectedStellarMemo}
                 />
diff --git a/src/pages/spacewalk/transactions/TransactionDialog.tsx b/src/pages/spacewalk/transactions/TransactionDialog.tsx
index 333a2f1d..3a756a3d 100644
--- a/src/pages/spacewalk/transactions/TransactionDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransactionDialog.tsx
@@ -8,7 +8,7 @@ import CancelledDialogIcon from '../../../assets/dialog-status-cancelled';
 import PendingDialogIcon from '../../../assets/dialog-status-pending';
 import SuccessDialogIcon from '../../../assets/dialog-status-success';
 import WarningDialogIcon from '../../../assets/dialog-status-warning';
-import { CopyableAddress } from '../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../components/PublicKey/CopyablePublicKey';
 import TransferCountdown from '../../../components/TransferCountdown';
 import {
   addSuffix,
@@ -86,14 +86,14 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
       <div className="flex flex-col items-center justify-between">
         {statusIcon}
         <div className="mt-5" />
-        <h1 className="text-2xl transfer-dialog-contrast-text font-semibold mb-1">{title}</h1>
+        <h1 className="transfer-dialog-contrast-text mb-1 text-2xl font-semibold">{title}</h1>
         {content}
         <Divider className="mx-5 mb-2 mt-1" />
         <Collapse
           id="details"
           tabIndex={0}
           onClick={toggle}
-          className={`collapse-arrow rounded-lg bg-black bg-opacity-3 transfer-dialog-text flex flex-col w-11/12 ${collapseVisibility}`}
+          className={`transfer-dialog-text collapse-arrow flex w-11/12 flex-col rounded-lg bg-black bg-opacity-3 ${collapseVisibility}`}
         >
           <Collapse.Title className="flex flex-row justify-between">
             <div className="text-sm">Bridge fee</div>
@@ -102,18 +102,18 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
           <Collapse.Content className="space-y-4">
             <div className="flex flex-row justify-between">
               <div className="text-sm">Destination Address (Stellar)</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p0"
+                className="p0 text-sm"
                 variant="short"
                 publicKey={destinationStellarAddress}
               />
             </div>
             <div className="flex flex-row justify-between">
               <div className="text-sm">Vault Address ({tenantNameCapitalized})</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p-0"
+                className="p-0 text-sm"
                 variant="short"
                 publicKey={transfer.original.vault.accountId.toString()}
               />
@@ -121,9 +121,9 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
             {vaultStellarPublicKey && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Vault Address (Stellar)</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={vaultStellarPublicKey}
                 />
@@ -132,9 +132,9 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
             {showMemo && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Memo</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={expectedStellarMemo}
                 />
@@ -177,14 +177,14 @@ export function CompletedTransactionDialog(props: TransactionDialogProps) {
   }
   const content = (
     <>
-      <div className="text-sm transfer-dialog-text">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
-      <label className="transfer-dialog-label rounded-lg px-4 py-2 my-4 text font-semibold ">
+      <div className="transfer-dialog-text text-sm">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
+      <label className="transfer-dialog-label text my-4 rounded-lg px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="flex flex-row justify-between w-11/12">
-        <div className="text-sm transfer-dialog-text">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
+      <div className="flex w-11/12 flex-row justify-between">
+        <div className="transfer-dialog-text text-sm">Spacewalk transaction</div>
+        <CopyablePublicKey inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
@@ -209,19 +209,19 @@ export function CancelledTransactionDialog(props: TransactionDialogProps) {
   const amountToSend = nativeToDecimal(transfer.original.amount.add(transfer.original.fee).toNumber()).toNumber();
   const content = (
     <>
-      <div className="text-md p-5 transfer-dialog-text align-middle text-center">
+      <div className="text-md transfer-dialog-text p-5 text-center align-middle">
         {`You did not send a Stellar transaction in time, or the transferred amount did not meet the requested amount of ${amountToSend}
           ${stellarAsset}.`}
       </div>
-      <div className="transfer-dialog-colored-text text-md ">
+      <div className="transfer-dialog-colored-text text-md">
         Contact the team for debugging if you think this is an error.
       </div>
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
-      <div className="flex flex-row justify-between w-11/12">
+      <div className="flex w-11/12 flex-row justify-between">
         <div className="text-xs">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
+        <CopyablePublicKey inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
@@ -299,24 +299,24 @@ export function PendingTransactionDialog(props: TransactionDialogProps) {
     <>
       <>
         <div
-          className="text-xl transfer-dialog-contrast-text text-semibold"
+          className="transfer-dialog-contrast-text text-semibold text-xl"
           title={amountToSend.toString()}
         >{`Send ${amountToSend.toNumber()} ${stellarAsset}`}</div>
         <div className="mt-2" />
-        <div className="transfer-dialog-text flex justify'center text ">
+        <div className="transfer-dialog-text justify'center text flex">
           <div className="mr-2">With the text memo</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
             variant="short"
             publicKey={expectedStellarMemo}
             className="transfer-dialog-text"
           />
         </div>
-        <div className="flex justify-center text-md transfer-dialog-text">
+        <div className="text-md transfer-dialog-text flex justify-center">
           <div className="mr-2">In a single transaction to</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
-            className="text-sm p-0 transfer-dialog-text"
+            className="transfer-dialog-text p-0 text-sm"
             variant="short"
             publicKey={destinationStellarAddress}
           />
@@ -325,11 +325,11 @@ export function PendingTransactionDialog(props: TransactionDialogProps) {
           Within <TransferCountdown request={transfer.original} />
         </div>
       </>
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="text-sm px-5 ">
+      <div className="px-5 text-sm">
         Note: Estimated time for issuing is in a minute after submitting the Stellar payment to the vault, contact
         <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
           support
@@ -341,7 +341,7 @@ export function PendingTransactionDialog(props: TransactionDialogProps) {
   );
   const redeemContent = (
     <>
-      <div className="text-xl mb-2">{`${amountToSend} ${stellarAsset}`}</div>
+      <div className="mb-2 text-xl">{`${amountToSend} ${stellarAsset}`}</div>
       <div className="text-md">The vault has to complete the transaction in:</div>
       <TransferCountdown request={transfer.original} />
       <div className="mt-2" />
@@ -373,7 +373,7 @@ export function FailedTransactionDialog(props: TransactionDialogProps) {
   const content = (
     <>
       <div className="text-xl">{`${amountToSend} ${stellarAsset}`}</div>
-      <label className="transfer-dialog-label rounded-lg px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded-lg px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
     </>
@@ -385,10 +385,10 @@ export function FailedTransactionDialog(props: TransactionDialogProps) {
         compensation.
       </div>
       <div className="mt-4" />
-      <div className="text-md font-bold pb-1">
+      <div className="text-md pb-1 font-bold">
         To redeem your {stellarAsset}, you must now pick one of the two options:
       </div>
-      <div className="text-md pl-2 pb-1">
+      <div className="text-md pb-1 pl-2">
         1. Receive compensation of {compensation} {stellarAsset} and retry with another vault.{' '}
         <Link className="font-semibold underline">Compensate</Link>
       </div>
diff --git a/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx
index 510b665a..549a3768 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx
@@ -1,6 +1,6 @@
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import CancelledDialogIcon from '../../../../assets/dialog-status-cancelled';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
 import { toTitle } from '../../../../helpers/string';
 import { nativeToDecimal } from '../../../../shared/parseNumbers/metric';
@@ -14,19 +14,19 @@ export function CancelledTransferDialog(props: TransferDialogProps) {
   const amountToSend = nativeToDecimal(transfer.original.amount.add(transfer.original.fee).toNumber()).toNumber();
   const content = (
     <>
-      <div className="text-md p-5 transfer-dialog-text align-middle text-center">
+      <div className="p-5 text-center align-middle text-md transfer-dialog-text">
         {`You did not send a Stellar transaction in time, or the transferred amount did not meet the requested amount of ${amountToSend}
             ${stellarAsset}.`}
       </div>
-      <div className="transfer-dialog-colored-text text-md ">
+      <div className="transfer-dialog-colored-text text-md">
         Contact the team for debugging if you think this is an error.
       </div>
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="px-4 py-2 my-4 font-semibold rounded transfer-dialog-label text">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="flex flex-row justify-between w-11/12">
         <div className="text-xs">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
+        <CopyablePublicKey inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
diff --git a/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx
index 6ff2b9e7..cd2046dc 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx
@@ -1,6 +1,6 @@
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import SuccessDialogIcon from '../../../../assets/dialog-status-success';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { addSuffix, convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
 import { toTitle } from '../../../../helpers/string';
 import { TransferType } from '../TransactionsColumns';
@@ -15,14 +15,14 @@ export function CompletedTransferDialog(props: TransferDialogProps) {
   }
   const content = (
     <>
-      <div className="text-sm transfer-dialog-text">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
-      <label className="transfer-dialog-label rounded-lg px-4 py-2 my-4 text font-semibold ">
+      <div className="transfer-dialog-text text-sm">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
+      <label className="transfer-dialog-label text my-4 rounded-lg px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="flex flex-row justify-between w-11/12">
-        <div className="text-sm transfer-dialog-text">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
+      <div className="flex w-11/12 flex-row justify-between">
+        <div className="transfer-dialog-text text-sm">Spacewalk transaction</div>
+        <CopyablePublicKey inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
diff --git a/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx
index 78784e37..71d02067 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from 'preact/compat';
 
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import PendingDialogIcon from '../../../../assets/dialog-status-pending';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import TransferCountdown from '../../../../components/TransferCountdown';
 import {
   calculateDeadline,
@@ -45,24 +45,24 @@ export function PendingTransferDialog(props: TransferDialogProps) {
     <>
       <>
         <div
-          className="text-xl transfer-dialog-contrast-text text-semibold"
+          className="transfer-dialog-contrast-text text-semibold text-xl"
           title={amountToSend.toString()}
         >{`Send ${amountToSend.toNumber()} ${stellarAsset}`}</div>
         <div className="mt-2" />
-        <div className="transfer-dialog-text flex justify'center text ">
+        <div className="transfer-dialog-text justify'center text flex">
           <div className="mr-2">With the text memo</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
             variant="short"
             publicKey={expectedStellarMemo}
             className="transfer-dialog-text"
           />
         </div>
-        <div className="flex justify-center text-md transfer-dialog-text">
+        <div className="text-md transfer-dialog-text flex justify-center">
           <div className="mr-2">In a single transaction to</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
-            className="text-sm p-0 transfer-dialog-text"
+            className="transfer-dialog-text p-0 text-sm"
             variant="short"
             publicKey={destinationStellarAddress}
           />
@@ -72,11 +72,11 @@ export function PendingTransferDialog(props: TransferDialogProps) {
         </div>
       </>
 
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="text-sm px-5 ">
+      <div className="px-5 text-sm">
         Note: Estimated time for issuing is in a minute after submitting the Stellar payment to the vault, contact
         <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
           support
@@ -88,7 +88,7 @@ export function PendingTransferDialog(props: TransferDialogProps) {
   );
   const redeemContent = (
     <>
-      <div className="text-xl mb-2">{`${amountToSend} ${stellarAsset}`}</div>
+      <div className="mb-2 text-xl">{`${amountToSend} ${stellarAsset}`}</div>
       <div className="text-md">The vault has to complete the transaction in:</div>
       <TransferCountdown request={transfer.original} />
       <div className="mt-2" />
diff --git a/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx
index b0ea0e5a..cbad469c 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx
@@ -9,7 +9,7 @@ import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
 import { toTitle } from '../../../../helpers/string';
 import { useVaultRegistryPallet } from '../../../../hooks/spacewalk/useVaultRegistryPallet';
 import { nativeToDecimal } from '../../../../shared/parseNumbers/metric';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { Dialog } from '../../../../components/Dialog';
 import { TTransfer } from '../TransactionsColumns';
 
@@ -74,14 +74,14 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
       <div className="flex flex-col items-center justify-between">
         {statusIcon}
         <div className="mt-5" />
-        <h1 className="text-2xl transfer-dialog-contrast-text font-semibold mb-1">{title}</h1>
+        <h1 className="transfer-dialog-contrast-text mb-1 text-2xl font-semibold">{title}</h1>
         {content}
         <Divider className="mx-5 mb-2 mt-1" />
         <div
           id="details"
           tabIndex={0}
           onClick={toggle}
-          className={`collapse collapse-arrow rounded-lg bg-black bg-opacity-3 transfer-dialog-text flex flex-col w-11/12 ${collapseVisibility}`}
+          className={`transfer-dialog-text collapse collapse-arrow flex w-11/12 flex-col rounded-lg bg-black bg-opacity-3 ${collapseVisibility}`}
         >
           <div className="collapse-title flex flex-row justify-between">
             <div className="text-sm">Bridge fee</div>
@@ -90,18 +90,18 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
           <div className="collapse-content space-y-4">
             <div className="flex flex-row justify-between">
               <div className="text-sm">Destination Address (Stellar)</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p0"
+                className="p0 text-sm"
                 variant="short"
                 publicKey={destinationStellarAddress}
               />
             </div>
             <div className="flex flex-row justify-between">
               <div className="text-sm">Vault Address ({tenantNameCapitalized})</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p-0"
+                className="p-0 text-sm"
                 variant="short"
                 publicKey={transfer.original.vault.accountId.toString()}
               />
@@ -109,9 +109,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {vaultStellarPublicKey && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Vault Address (Stellar)</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={vaultStellarPublicKey}
                 />
@@ -120,9 +120,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {showMemo && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Memo</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={expectedStellarMemo}
                 />
diff --git a/src/pages/staking/CollatorColumns.tsx b/src/pages/staking/CollatorColumns.tsx
index 06fc9397..955644c3 100644
--- a/src/pages/staking/CollatorColumns.tsx
+++ b/src/pages/staking/CollatorColumns.tsx
@@ -4,7 +4,7 @@ import { ColumnDef } from '@tanstack/table-core';
 import { StateUpdater, Dispatch } from 'preact/hooks';
 import { Button } from 'react-daisyui';
 import UnlinkIcon from '../../assets/UnlinkIcon';
-import { CopyableAddress } from '../../components/PublicKey';
+import { CopyablePublicKey } from '../../components/PublicKey/CopyablePublicKey';
 import { ParachainStakingCandidate } from '../../hooks/staking/useStakingPallet';
 import { PalletIdentityInfo } from '../../hooks/useIdentityPallet';
 import { nativeToFormatMetric } from '../../shared/parseNumbers/metric';
@@ -43,7 +43,7 @@ export const nameColumn: ColumnDef<TCollator> = {
     return (
       <div className="flex flex-row" title={desc}>
         <div className="mr-2">{(row.original.identityInfo ? row.original.identityInfo.display : 'Unknown') + ' |'}</div>
-        <CopyableAddress publicKey={row.original.candidate.id} variant="short" inline />
+        <CopyablePublicKey publicKey={row.original.candidate.id} variant="short" inline />
       </div>
     );
   },