diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
index ad15c85cb..17eef1060 100644
--- a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
@@ -66,7 +66,7 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
             profile={
               activeWalletAvatar
                 ? {
-                    fallback: walletName,
+                    fallbackText: walletName,
                     imageSrc: activeWalletAvatar
                   }
                 : undefined
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
index ef5f056f8..7825109cf 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
@@ -111,7 +111,7 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
           profile={
             walletAvatar
               ? {
-                  fallback: fullWalletName,
+                  fallbackText: fullWalletName,
                   imageSrc: walletAvatar
                 }
               : undefined
diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSection.tsx b/packages/core/src/ui/components/DappAddressSections/DappAddressSection.tsx
new file mode 100644
index 000000000..d7e101b6f
--- /dev/null
+++ b/packages/core/src/ui/components/DappAddressSections/DappAddressSection.tsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import { truncate, addEllipsis } from '@lace/common';
+import { Wallet } from '@lace/cardano';
+import { Cardano, AssetInfoWithAmount } from '@cardano-sdk/core';
+
+import styles from './DappAddressSections.module.scss';
+import { useTranslate } from '@src/ui/hooks';
+
+import { Text, TransactionAssets, DappTransactionSummary, Tooltip, SummaryExpander, Box, Flex } from '@lace/ui';
+import { getAddressTagTranslations, renderAddressTag } from '@src/ui/utils';
+
+interface GroupedAddressAssets {
+  nfts: Array<AssetInfoWithAmount>;
+  tokens: Array<AssetInfoWithAmount>;
+  coins: Array<bigint>;
+}
+
+export interface DappAddressSectionProps {
+  groupedAddresses: Map<Cardano.PaymentAddress, GroupedAddressAssets>;
+  title: string;
+  isEnabled: boolean;
+  coinSymbol: string;
+  addressType: 'from' | 'to';
+  ownAddresses: string[];
+  addressToNameMap?: Map<string, string>;
+}
+
+const tryDecodeAsUtf8 = (
+  value: WithImplicitCoercion<string> | { [Symbol.toPrimitive](hint: 'string'): string }
+): string => {
+  const bytes = Uint8Array.from(Buffer.from(value, 'hex'));
+  const decoder = new TextDecoder('utf-8');
+  // Decode the Uint8Array to a UTF-8 string
+  return decoder.decode(bytes);
+};
+
+const getFallbackName = (asset: AssetInfoWithAmount) =>
+  tryDecodeAsUtf8(asset.assetInfo.name) ? tryDecodeAsUtf8(asset.assetInfo.name) : asset.assetInfo.assetId;
+
+const isNFT = (asset: AssetInfoWithAmount) => asset.assetInfo.supply === BigInt(1);
+
+const getAssetTokenName = (assetWithAmount: AssetInfoWithAmount) => {
+  if (isNFT(assetWithAmount)) {
+    return assetWithAmount.assetInfo.nftMetadata?.name ?? getFallbackName(assetWithAmount);
+  }
+  return assetWithAmount.assetInfo.tokenMetadata?.ticker ?? getFallbackName(assetWithAmount);
+};
+
+const charBeforeEllName = 9;
+const charAfterEllName = 0;
+
+type UseTranslate = ReturnType<typeof useTranslate>['t'];
+
+const getTransactionAssetTranslations = (t: UseTranslate) => ({
+  assetId: t('core.dappTransaction.assetId'),
+  policyId: t('core.dappTransaction.policyId')
+});
+
+const displayGroupedNFTs = (nfts: AssetInfoWithAmount[], t: UseTranslate, testId?: string) =>
+  nfts.map((nft: AssetInfoWithAmount) => {
+    const imageSrc = nft.assetInfo.tokenMetadata?.icon ?? nft.assetInfo.nftMetadata?.image ?? undefined;
+    return (
+      <TransactionAssets
+        testId={testId}
+        key={nft.assetInfo.fingerprint}
+        imageSrc={imageSrc}
+        translations={getTransactionAssetTranslations(t)}
+        balance={Wallet.util.calculateAssetBalance(nft.amount, nft.assetInfo)}
+        assetId={nft.assetInfo.assetId}
+        policyId={nft.assetInfo.policyId}
+        tokenName={truncate(getAssetTokenName(nft), charBeforeEllName, charAfterEllName)}
+        showImageBackground={imageSrc === undefined}
+      />
+    );
+  });
+
+const displayGroupedTokens = (tokens: AssetInfoWithAmount[], t: UseTranslate, testId?: string) =>
+  tokens.map((token: AssetInfoWithAmount) => {
+    const imageSrc = token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined;
+
+    return (
+      <TransactionAssets
+        testId={testId}
+        key={token.assetInfo.fingerprint}
+        imageSrc={token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined}
+        translations={getTransactionAssetTranslations(t)}
+        balance={Wallet.util.calculateAssetBalance(token.amount, token.assetInfo)}
+        assetId={token.assetInfo.assetId}
+        policyId={token.assetInfo.policyId}
+        tokenName={truncate(getAssetTokenName(token), charBeforeEllName, charAfterEllName)}
+        showImageBackground={imageSrc === undefined}
+      />
+    );
+  });
+
+const charBeforeEllipsisName = 8;
+const charAfterEllipsisName = 8;
+
+const getStringFromLovelace = (value: bigint): string => Wallet.util.lovelacesToAdaString(value.toString());
+
+const getTokenQuantity = (tokens: Array<AssetInfoWithAmount>, coins: Array<bigint>) => {
+  let quantity = tokens.length;
+
+  if (coins.length > 0) {
+    quantity += 1;
+  }
+
+  return quantity;
+};
+export const DappAddressSection = ({
+  groupedAddresses,
+  isEnabled,
+  coinSymbol,
+  title,
+  addressType,
+  ownAddresses,
+  addressToNameMap
+}: DappAddressSectionProps): React.ReactElement => {
+  const { t } = useTranslate();
+
+  const itemsCountCopy = t('core.dappTransaction.items');
+
+  return (
+    <SummaryExpander title={title} disabled={!isEnabled} testId={`dapp-transaction-${addressType}-section-expander`}>
+      {[...groupedAddresses.entries()].map(([address, addressData]) => (
+        <Box mb="$20" key={address}>
+          <div key={address} className={styles.address} data-testid={`dapp-transaction-${addressType}-row`}>
+            <Text.Body.Normal data-testid="dapp-transaction-address-title" weight="$medium">
+              {t('core.dappTransaction.address')}
+            </Text.Body.Normal>
+
+            <Flex flexDirection="column" alignItems="flex-end" gap="$8">
+              <Text.Body.Small data-testid="dapp-transaction-address" weight="$medium">
+                <Tooltip label={address}>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</Tooltip>
+              </Text.Body.Small>
+              {renderAddressTag(address, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
+            </Flex>
+          </div>
+          {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
+            <>
+              <div className={styles.tokenCount} data-testid={`dapp-transaction-${addressType}-row`}>
+                <Text.Body.Normal data-testid="dapp-transaction-tokens-title" weight="$medium">
+                  {t('core.dappTransaction.tokens')}
+                </Text.Body.Normal>
+                <Text.Body.Normal
+                  color={addressType === 'to' ? 'success' : 'primary'}
+                  data-testid="dapp-transaction-tokens-value"
+                  weight="$medium"
+                >
+                  {addressType === 'to'
+                    ? `${getTokenQuantity(addressData.tokens, addressData.coins)} ${itemsCountCopy}`
+                    : `-${getTokenQuantity(addressData.tokens, addressData.coins)} ${itemsCountCopy}`}
+                </Text.Body.Normal>
+              </div>
+              {addressData.coins.map((coin) => (
+                <DappTransactionSummary
+                  testId={`dapp-transaction-${addressType}-row`}
+                  key={`${address}${coin}`}
+                  adaTooltip={t('core.dappTransaction.adaTooltip')}
+                  cardanoSymbol={coinSymbol}
+                  transactionAmount={getStringFromLovelace(coin)}
+                />
+              ))}
+              {displayGroupedTokens(addressData.tokens, t, `dapp-transaction-${addressType}-row`)}
+            </>
+          )}
+
+          {addressData.nfts.length > 0 && (
+            <>
+              <div className={styles.tokenCount} data-testid={`dapp-transaction-${addressType}-row`}>
+                <Text.Body.Normal data-testid="dapp-transaction-nfts-title" weight="$medium">
+                  {t('core.dappTransaction.nfts')}
+                </Text.Body.Normal>
+                <Text.Body.Normal
+                  data-testid="dapp-transaction-nfts-amount-value"
+                  weight="$medium"
+                  color={addressType === 'to' ? 'success' : 'primary'}
+                >
+                  {addressType === 'to'
+                    ? `${addressData.nfts.length} ${itemsCountCopy}`
+                    : `-${addressData.nfts.length} ${itemsCountCopy}`}
+                </Text.Body.Normal>
+              </div>
+              {displayGroupedNFTs(addressData.nfts, t, `dapp-transaction-${addressType}-row`)}
+            </>
+          )}
+        </Box>
+      ))}
+    </SummaryExpander>
+  );
+};
diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss
index 74bf3b3cc..4d373f762 100644
--- a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss
+++ b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.module.scss
@@ -1,34 +1,14 @@
 @import '../../styles/theme.scss';
 @import '../../../../../common/src/ui/styles/abstracts/_typography.scss';
 
-.label {
-  color: var(--text-color-primary, #ffffff) !important;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.value {
-  color: var(--text-color-primary, #ffffff) !important;
-  font-size: 14px;
-  font-weight: 500;
-}
-
 .address {
   display: flex;
   justify-content: space-between;
   padding: size_unit(2.5) 0;
 }
 
-.summaryContent {
-  padding-bottom: size_unit(2.5);
-}
-
 .tokenCount {
   display: flex;
   justify-content: space-between;
   align-items: end;
 }
-
-.positiveAmount {
-  color: var(--data-green, #2CB67D) !important;
-}
diff --git a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx
index 3836c964d..671aa22af 100644
--- a/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx
+++ b/packages/core/src/ui/components/DappAddressSections/DappAddressSections.tsx
@@ -1,16 +1,10 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import React from 'react';
-import { truncate, addEllipsis } from '@lace/common';
-import { Wallet } from '@lace/cardano';
 import { Cardano, AssetInfoWithAmount } from '@cardano-sdk/core';
-import { Typography } from 'antd';
 
-import styles from './DappAddressSections.module.scss';
 import { useTranslate } from '@src/ui/hooks';
 
-import { Flex, TransactionAssets, SummaryExpander, DappTransactionSummary, Tooltip } from '@lace/ui';
-import classNames from 'classnames';
-import { getAddressTagTranslations, renderAddressTag } from '@ui/utils/render-address-tag';
+import { DappAddressSection } from './DappAddressSection';
 
 interface GroupedAddressAssets {
   nfts: Array<AssetInfoWithAmount>;
@@ -28,90 +22,6 @@ export interface DappAddressSectionProps {
   addressToNameMap?: Map<string, string>;
 }
 
-const tryDecodeAsUtf8 = (
-  value: WithImplicitCoercion<string> | { [Symbol.toPrimitive](hint: 'string'): string }
-): string => {
-  const bytes = Uint8Array.from(Buffer.from(value, 'hex'));
-  const decoder = new TextDecoder('utf-8');
-  // Decode the Uint8Array to a UTF-8 string
-  return decoder.decode(bytes);
-};
-
-const getFallbackName = (asset: AssetInfoWithAmount) =>
-  tryDecodeAsUtf8(asset.assetInfo.name) ? tryDecodeAsUtf8(asset.assetInfo.name) : asset.assetInfo.assetId;
-
-const isNFT = (asset: AssetInfoWithAmount) => asset.assetInfo.supply === BigInt(1);
-
-const getAssetTokenName = (assetWithAmount: AssetInfoWithAmount) => {
-  if (isNFT(assetWithAmount)) {
-    return assetWithAmount.assetInfo.nftMetadata?.name ?? getFallbackName(assetWithAmount);
-  }
-  return assetWithAmount.assetInfo.tokenMetadata?.ticker ?? getFallbackName(assetWithAmount);
-};
-
-const charBeforeEllName = 9;
-const charAfterEllName = 0;
-
-type UseTranslate = ReturnType<typeof useTranslate>['t'];
-
-const getTransactionAssetTranslations = (t: UseTranslate) => ({
-  assetId: t('core.dappTransaction.assetId'),
-  policyId: t('core.dappTransaction.policyId')
-});
-
-const displayGroupedNFTs = (nfts: AssetInfoWithAmount[], t: UseTranslate, testId?: string) =>
-  nfts.map((nft: AssetInfoWithAmount) => {
-    const imageSrc = nft.assetInfo.tokenMetadata?.icon ?? nft.assetInfo.nftMetadata?.image ?? undefined;
-    return (
-      <TransactionAssets
-        testId={testId}
-        key={nft.assetInfo.fingerprint}
-        imageSrc={imageSrc}
-        translations={getTransactionAssetTranslations(t)}
-        balance={Wallet.util.calculateAssetBalance(nft.amount, nft.assetInfo)}
-        assetId={nft.assetInfo.assetId}
-        policyId={nft.assetInfo.policyId}
-        tokenName={truncate(getAssetTokenName(nft), charBeforeEllName, charAfterEllName)}
-        showImageBackground={imageSrc === undefined}
-      />
-    );
-  });
-
-const displayGroupedTokens = (tokens: AssetInfoWithAmount[], t: UseTranslate, testId?: string) =>
-  tokens.map((token: AssetInfoWithAmount) => {
-    const imageSrc = token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined;
-
-    return (
-      <TransactionAssets
-        testId={testId}
-        key={token.assetInfo.fingerprint}
-        imageSrc={token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined}
-        translations={getTransactionAssetTranslations(t)}
-        balance={Wallet.util.calculateAssetBalance(token.amount, token.assetInfo)}
-        assetId={token.assetInfo.assetId}
-        policyId={token.assetInfo.policyId}
-        tokenName={truncate(getAssetTokenName(token), charBeforeEllName, charAfterEllName)}
-        showImageBackground={imageSrc === undefined}
-      />
-    );
-  });
-
-const { Title, Text } = Typography;
-
-const charBeforeEllipsisName = 8;
-const charAfterEllipsisName = 8;
-
-const getStringFromLovelace = (value: bigint): string => Wallet.util.lovelacesToAdaString(value.toString());
-
-const getTokenQuantity = (tokens: Array<AssetInfoWithAmount>, coins: Array<bigint>) => {
-  let quantity = tokens.length;
-
-  if (coins.length > 0) {
-    quantity += 1;
-  }
-
-  return quantity;
-};
 export const DappAddressSections = ({
   groupedFromAddresses,
   groupedToAddresses,
@@ -123,141 +33,27 @@ export const DappAddressSections = ({
 }: DappAddressSectionProps): React.ReactElement => {
   const { t } = useTranslate();
 
-  const itemsCountCopy = t('core.dappTransaction.items');
-
   return (
     <>
-      <SummaryExpander
+      <DappAddressSection
+        addressType="from"
+        coinSymbol={coinSymbol}
+        groupedAddresses={groupedFromAddresses}
         title={t('core.dappTransaction.fromAddress')}
-        disabled={!isFromAddressesEnabled}
-        testId="dapp-transaction-from-section-expander"
-      >
-        <div className={styles.summaryContent}>
-          {[...groupedFromAddresses.entries()].map(([address, addressData]) => (
-            <>
-              <div key={address} className={styles.address} data-testid="dapp-transaction-from-row">
-                <Text className={styles.label} data-testid="dapp-transaction-address-title">
-                  {t('core.dappTransaction.address')}
-                </Text>
-                <Flex flexDirection="column" alignItems="flex-end" gap="$8">
-                  <Text className={styles.value} data-testid="dapp-transaction-address">
-                    <Tooltip label={address}>
-                      {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
-                    </Tooltip>
-                  </Text>
-                  {renderAddressTag(address, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
-                </Flex>
-              </div>
-              {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
-                <>
-                  <div className={styles.tokenCount} data-testid="dapp-transaction-from-row">
-                    <Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
-                      {t('core.dappTransaction.tokens')}
-                    </Title>
-                    <Title level={5} className={styles.value} data-testid="dapp-transaction-tokens-value">
-                      -{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
-                    </Title>
-                  </div>
-                  {addressData.coins.map((coin) => (
-                    <DappTransactionSummary
-                      testId="dapp-transaction-from-row"
-                      key={`${address}${coin}`}
-                      adaTooltip={t('core.dappTransaction.adaTooltip')}
-                      cardanoSymbol={coinSymbol}
-                      transactionAmount={getStringFromLovelace(coin)}
-                    />
-                  ))}
-                  {displayGroupedTokens(addressData.tokens, t, 'dapp-transaction-from-row')}
-                </>
-              )}
-
-              {addressData.nfts.length > 0 && (
-                <>
-                  <div className={styles.tokenCount} data-testid="dapp-transaction-from-row">
-                    <Title level={5} data-testid="dapp-transaction-nfts-title">
-                      {t('core.dappTransaction.nfts')}
-                    </Title>
-                    <Title level={5} data-testid="dapp-transaction-nfts-amount-value">
-                      -{addressData.nfts.length} {itemsCountCopy}
-                    </Title>
-                  </div>
-                  {displayGroupedNFTs(addressData.nfts, t, 'dapp-transaction-from-row')}
-                </>
-              )}
-            </>
-          ))}
-        </div>
-      </SummaryExpander>
+        isEnabled={isFromAddressesEnabled}
+        ownAddresses={ownAddresses}
+        addressToNameMap={addressToNameMap}
+      />
 
-      <SummaryExpander
+      <DappAddressSection
+        addressType="to"
+        coinSymbol={coinSymbol}
+        groupedAddresses={groupedToAddresses}
         title={t('core.dappTransaction.toAddress')}
-        disabled={!isToAddressesEnabled}
-        testId="dapp-transaction-to-section-expander"
-      >
-        <div>
-          {[...groupedToAddresses.entries()].map(([address, addressData]) => (
-            <>
-              <div key={address} className={styles.address} data-testid="dapp-transaction-to-row">
-                <Text className={styles.label} data-testid="dapp-transaction-address-title">
-                  {t('core.dappTransaction.address')}
-                </Text>
-                <Flex flexDirection="column" alignItems="flex-end" gap="$8">
-                  <Text className={styles.value} data-testid="dapp-transaction-address">
-                    <Tooltip label={address}>
-                      {addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}
-                    </Tooltip>
-                  </Text>
-                  {renderAddressTag(address, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
-                </Flex>
-              </div>
-              {(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
-                <>
-                  <div className={styles.tokenCount} data-testid="dapp-transaction-to-row">
-                    <Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
-                      {t('core.dappTransaction.tokens')}
-                    </Title>
-                    <Title
-                      level={5}
-                      className={classNames(styles.value, styles.positiveAmount)}
-                      data-testid="dapp-transaction-tokens-value"
-                    >
-                      {getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
-                    </Title>
-                  </div>
-                  {addressData.coins.map((coin) => (
-                    <DappTransactionSummary
-                      key={`${address}${coin}`}
-                      cardanoSymbol={coinSymbol}
-                      adaTooltip={t('core.dappTransaction.adaTooltip')}
-                      transactionAmount={getStringFromLovelace(coin)}
-                      testId="dapp-transaction-to-row"
-                    />
-                  ))}
-                  {displayGroupedTokens(addressData.tokens, t, 'dapp-transaction-to-row')}
-                </>
-              )}
-
-              {addressData.nfts.length > 0 && (
-                <>
-                  <div className={styles.tokenCount} data-testid="dapp-transaction-to-row">
-                    <Title level={5} className={styles.label} data-testid="dapp-transaction-nfts-title">
-                      {t('core.dappTransaction.nfts')}
-                    </Title>
-                    <Title
-                      level={5}
-                      className={classNames(styles.value, styles.positiveAmount)}
-                      data-testid="dapp-transaction-nfts-amount-value"
-                    >
-                      {addressData.nfts.length} {itemsCountCopy}
-                    </Title>
-                  </div>
-                  {displayGroupedNFTs(addressData.nfts, t, 'dapp-transaction-to-row')}
-                </>
-              )}
-            </>
-          ))}
-        </div>
-      </SummaryExpander>
+        isEnabled={isToAddressesEnabled}
+        ownAddresses={ownAddresses}
+        addressToNameMap={addressToNameMap}
+      />
     </>
   );
 };
diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx b/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx
index eaa01c983..c4f0de584 100644
--- a/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx
+++ b/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx
@@ -11,7 +11,7 @@ import styles from './DappTransaction.module.scss';
 import { useTranslate } from '@src/ui/hooks';
 import { TransactionFee, Collateral } from '@ui/components/ActivityDetail';
 
-import { TransactionType, DappTransactionSummary, TransactionAssets } from '@lace/ui';
+import { TransactionType, DappTransactionSummary, TransactionAssets, Text, Box, Divider } from '@lace/ui';
 import { DappAddressSections } from '../DappAddressSections/DappAddressSections';
 
 const amountTransformer = (fiat: { price: number; code: string }) => (ada: string) =>
@@ -136,6 +136,7 @@ export const DappTransaction = ({
           adaTooltip={t('core.dappTransaction.adaTooltip')}
           cardanoSymbol={coinSymbol}
           transactionAmount={Wallet.util.lovelacesToAdaString(coins.toString())}
+          tooltip={t('core.dappTransaction.transactionSummaryTooltip')}
         />
         <div className={styles.transactionAssetsContainer}>
           {[...assets].map(([key, assetWithAmount]: [string, AssetInfoWithAmount]) => {
@@ -162,6 +163,14 @@ export const DappTransaction = ({
           })}
         </div>
 
+        <Box mb="$20">
+          <Divider />
+        </Box>
+
+        <Box mb="$16">
+          <Text.Body.Normal weight="$semibold">{t('core.dappTransaction.additionalInformation')}</Text.Body.Normal>
+        </Box>
+
         {collateral !== undefined && collateral !== BigInt(0) && (
           <Collateral
             testId="collateral"
diff --git a/packages/core/src/ui/lib/translations/en.json b/packages/core/src/ui/lib/translations/en.json
index 082e3c8c5..4c5a368c2 100644
--- a/packages/core/src/ui/lib/translations/en.json
+++ b/packages/core/src/ui/lib/translations/en.json
@@ -195,6 +195,7 @@
   "core.dapp.beta": "DApp connector Beta",
   "core.dappTransaction.adaTooltip": "Ada is Cardano's native token and does not have an asset and policy ID.",
   "core.dappTransaction.address": "Address",
+  "core.dappTransaction.additionalInformation": "Additional information",
   "core.dappTransaction.amount": "Amount",
   "core.dappTransaction.asset": "Asset",
   "core.dappTransaction.assetId": "AssetId:",
@@ -219,6 +220,7 @@
   "core.dappTransaction.tokens": "Tokens",
   "core.dappTransaction.transaction": "Transaction",
   "core.dappTransaction.transactionSummary": "Transaction Summary",
+  "core.dappTransaction.transactionSummaryTooltip": "This summary includes all assets entering or leaving your wallet as part of this transaction, including fees, deposits.",
   "core.dappTransaction.tryingToUseAssetNotInWallet": "This DApp is trying to use token not held in your wallet.",
   "core.destinationAddressInput.recipientAddress": "Recipient's address or $handle",
   "core.DRepRegistration.depositPaid": "Deposit paid",
diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx
index e47443e77..dd38c0b3a 100644
--- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx
+++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-assets.component.tsx
@@ -53,12 +53,12 @@ export const TransactionAssets = ({
   const { theme } = useThemeVariant();
   const isNegativeBalance = balance.includes('-');
 
-  const setThemeFallbackImagine =
+  const themeFallbackImage =
     theme === ThemeColorScheme.Dark ? DarkFallBack : LightFallBack;
 
   const getImageSource = (value: string | undefined): string => {
     if (value === '' || value === undefined) {
-      return setThemeFallbackImagine;
+      return themeFallbackImage;
     } else if (value.startsWith('ipfs')) {
       return value.replace('ipfs://', 'https://ipfs.io/ipfs/');
     } else if (isImageBase64Encoded(value)) {
@@ -82,7 +82,7 @@ export const TransactionAssets = ({
         <Cell>
           <Tooltip label={tooltipLabel}>
             <UserProfile
-              fallback={setThemeFallbackImagine}
+              fallbackImage={themeFallbackImage}
               imageSrc={getImageSource(imageSrc)}
               alt={tokenName}
               radius="rounded"
@@ -97,14 +97,14 @@ export const TransactionAssets = ({
             className={styles.balanceDetailContainer}
           >
             <Tooltip label={tooltipLabel}>
-              <Text.Body.Small
+              <Text.Body.Normal
                 color={isNegativeBalance ? 'primary' : 'success'}
-                weight="$semibold"
+                weight="$medium"
               >
                 <span>
                   {balance} {tokenName}
                 </span>
-              </Text.Body.Small>
+              </Text.Body.Normal>
             </Tooltip>
           </Flex>
         </Cell>
diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx
index 1e23cb84c..13f37d7fe 100644
--- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx
+++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx
@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import React from 'react';
 
 import { ReactComponent as CardanoLogoComponent } from '@lace/icons/dist/CardanoLogoComponent';
+import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
 
+import { Box } from '../box';
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import { Text } from '../text';
@@ -18,6 +21,7 @@ type Props = OmitClassName<'div'> & {
   adaTooltip: string;
   title?: string;
   cardanoSymbol?: string;
+  tooltip?: string;
 };
 
 export const TransactionSummary = ({
@@ -26,12 +30,20 @@ export const TransactionSummary = ({
   adaTooltip,
   title,
   cardanoSymbol,
+  tooltip,
   ...props
 }: Readonly<Props>): JSX.Element => (
   <div className={styles.txSummaryContainer}>
     {title !== undefined && (
       <Flex justifyContent="flex-start" mb="$18">
-        <Text.Body.Large weight="$bold">{title}</Text.Body.Large>
+        <Text.Body.Normal weight="$semibold">{title}</Text.Body.Normal>
+        {tooltip && (
+          <Box ml="$8" className={styles.iconContainer}>
+            <Tooltip label={tooltip}>
+              <InfoIcon className={styles.tooltipIcon} />
+            </Tooltip>
+          </Box>
+        )}
       </Flex>
     )}
     <div className={styles.txAmountContainer} data-testid={testId}>
@@ -44,12 +56,12 @@ export const TransactionSummary = ({
         <Cell>
           <Flex justifyContent="flex-end">
             <Tooltip label={adaTooltip}>
-              <Text.Body.Small
+              <Text.Body.Normal
                 color={transactionAmount.includes('-') ? 'primary' : 'success'}
-                weight="$semibold"
+                weight="$medium"
               >
                 {transactionAmount} {cardanoSymbol}
-              </Text.Body.Small>
+              </Text.Body.Normal>
             </Tooltip>
           </Flex>
         </Cell>
diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts
index 37685d473..cd7d2cab3 100644
--- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts
+++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts
@@ -30,3 +30,15 @@ export const assetsContainer = style({
 export const txSummaryContainer = style({
   paddingTop: '20px',
 });
+
+export const tooltipIcon = style([
+  sx({
+    color: '$text_primary',
+    height: '$24',
+    width: '$24',
+  }),
+]);
+
+export const iconContainer = style({
+  lineHeight: 0,
+});
diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx
index 3a9309649..e6a3100d7 100644
--- a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx
+++ b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx
@@ -88,6 +88,7 @@ const Example = (): JSX.Element => (
     <TransactionSummary
       title="Transaction Summary"
       transactionAmount="-100.00"
+      tooltip="This is a test tooltip"
       adaTooltip="Special tooltip for ADA token"
     />
     {items.map(value => (
diff --git a/packages/ui/src/design-system/profile-dropdown/accounts/profile-dropdown-account-item.component.tsx b/packages/ui/src/design-system/profile-dropdown/accounts/profile-dropdown-account-item.component.tsx
index 5ef5c4357..b176f838e 100644
--- a/packages/ui/src/design-system/profile-dropdown/accounts/profile-dropdown-account-item.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/accounts/profile-dropdown-account-item.component.tsx
@@ -76,7 +76,7 @@ export const AccountItem = ({
       <Flex alignItems="center" gap="$8">
         <ProfilePicture.UserProfile
           imageSrc=""
-          fallback={accountNumber.toString()}
+          fallbackText={accountNumber.toString()}
           delayMs={0}
           data-testid="wallet-account-item-icon"
         />
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
index 9ea905684..3e325beca 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx
@@ -20,7 +20,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   subtitle: string;
   profile?: {
     imageSrc: string;
-    fallback: string;
+    fallbackText: string;
     alt?: string;
     delayMs?: number;
   };
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
index 852bee0ba..767da5af7 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx
@@ -20,7 +20,7 @@ export interface Props {
   subtitle: string;
   profile?: {
     imageSrc: string;
-    fallback: string;
+    fallbackText: string;
     alt?: string;
     delayMs?: number;
   };
diff --git a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
index 1f7ff0752..344529403 100644
--- a/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
+++ b/packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx
@@ -19,7 +19,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   subtitle: string;
   profile?: {
     imageSrc: string;
-    fallback: string;
+    fallbackText: string;
     alt?: string;
     delayMs?: number;
   };
diff --git a/packages/ui/src/design-system/profile-picture/profile-picture.stories.tsx b/packages/ui/src/design-system/profile-picture/profile-picture.stories.tsx
index aaf2d5fe1..24dd8a0b5 100644
--- a/packages/ui/src/design-system/profile-picture/profile-picture.stories.tsx
+++ b/packages/ui/src/design-system/profile-picture/profile-picture.stories.tsx
@@ -3,7 +3,10 @@ import React from 'react';
 import type { Meta } from '@storybook/react';
 
 import cardanoImage from '../../assets/images/cardano-blue-bg.png';
+import DarkFallBack from '../../assets/images/dark-mode-fallback.png';
+import LightFallBack from '../../assets/images/light-mode-fallback.png';
 import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
+import { useThemeVariant } from '../../design-tokens/theme/hooks/use-theme-variant';
 import { page, Variants, Section } from '../decorators';
 import { Divider } from '../divider';
 import { Grid, Cell } from '../grid';
@@ -25,25 +28,41 @@ export default {
   decorators: [page({ title: 'Profile picture', subtitle })],
 } as Meta;
 
-const Images = (): JSX.Element => (
-  <>
-    <Variants.Row>
-      <Variants.Cell>
-        <UserProfile imageSrc="" fallback="L" delayMs={0} />
-      </Variants.Cell>
-    </Variants.Row>
-    <Variants.Row>
-      <Variants.Cell>
-        <Initials letter="M" />
-      </Variants.Cell>
-    </Variants.Row>
-    <Variants.Row>
-      <Variants.Cell>
-        <Image imageSrc={cardanoImage} />
-      </Variants.Cell>
-    </Variants.Row>
-  </>
-);
+const Images = (): JSX.Element => {
+  const { theme } = useThemeVariant();
+  const fallbackImage =
+    theme === ThemeColorScheme.Dark ? DarkFallBack : LightFallBack;
+
+  return (
+    <>
+      <Variants.Row>
+        <Variants.Cell>
+          <UserProfile imageSrc="" fallbackText="L" delayMs={0} />
+        </Variants.Cell>
+      </Variants.Row>
+      <Variants.Row>
+        <Variants.Cell>
+          <UserProfile
+            imageSrc=""
+            delayMs={0}
+            fallbackText="FallbackImage has priority over fallbackText"
+            fallbackImage={fallbackImage}
+          />
+        </Variants.Cell>
+      </Variants.Row>
+      <Variants.Row>
+        <Variants.Cell>
+          <Initials letter="M" />
+        </Variants.Cell>
+      </Variants.Row>
+      <Variants.Row>
+        <Variants.Cell>
+          <Image imageSrc={cardanoImage} />
+        </Variants.Cell>
+      </Variants.Row>
+    </>
+  );
+};
 
 export const Overview = (): JSX.Element => (
   <Grid columns="$1">
@@ -52,7 +71,7 @@ export const Overview = (): JSX.Element => (
         <Variants.Table headers={['User profile', 'Initials', 'Image']}>
           <Variants.Row>
             <Variants.Cell>
-              <UserProfile imageSrc="" fallback="L" delayMs={0} />
+              <UserProfile imageSrc="" fallbackText="L" delayMs={0} />
             </Variants.Cell>
             <Variants.Cell>
               <Initials letter="M" />
@@ -74,18 +93,18 @@ export const Overview = (): JSX.Element => (
         >
           <Variants.Row>
             <Variants.Cell>
-              <UserProfile imageSrc="" fallback="L" />
+              <UserProfile imageSrc="" fallbackText="L" />
             </Variants.Cell>
             <Variants.Cell>
               <UserProfile
                 imageSrc="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
-                fallback="L"
+                fallbackText="L"
               />
             </Variants.Cell>
             <Variants.Cell>
               <UserProfile
                 imageSrc="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
-                fallback="L"
+                fallbackText="L"
                 radius="rounded"
               />
             </Variants.Cell>
diff --git a/packages/ui/src/design-system/profile-picture/user-profile.component.tsx b/packages/ui/src/design-system/profile-picture/user-profile.component.tsx
index c86357105..e1e645e89 100644
--- a/packages/ui/src/design-system/profile-picture/user-profile.component.tsx
+++ b/packages/ui/src/design-system/profile-picture/user-profile.component.tsx
@@ -9,21 +9,28 @@ import * as cx from './user-profile.css';
 
 interface Props {
   imageSrc: string;
-  fallback: string;
   alt?: string;
   delayMs?: number;
   radius?: 'circle' | 'rounded';
   background?: 'none';
 }
 
+interface FallbackText {
+  fallbackText: string;
+}
+
+interface FallbackImage {
+  fallbackImage: string;
+}
+
 export const UserProfile = ({
   imageSrc,
-  fallback: letter,
   alt,
   delayMs = 600,
   radius = 'circle',
   background,
-}: Readonly<Props>): JSX.Element => (
+  ...rest
+}: Readonly<Props & (FallbackImage | FallbackText)>): JSX.Element => (
   <RadixUIAvatar.Root
     className={classNames(cx.root, {
       [cx.rounded]: radius === 'rounded',
@@ -32,10 +39,14 @@ export const UserProfile = ({
     })}
   >
     <RadixUIAvatar.Image className={cx.image} src={imageSrc} alt={alt} />
-    <RadixUIAvatar.Fallback delayMs={delayMs}>
-      <Text.Body.Normal weight="$bold" className={cx.fallbackText}>
-        {letter}
-      </Text.Body.Normal>
+    <RadixUIAvatar.Fallback asChild delayMs={delayMs}>
+      {'fallbackImage' in rest ? (
+        <img className={cx.image} src={rest.fallbackImage} alt={alt} />
+      ) : (
+        <Text.Body.Normal weight="$bold" className={cx.fallbackText}>
+          {rest.fallbackText}
+        </Text.Body.Normal>
+      )}
     </RadixUIAvatar.Fallback>
   </RadixUIAvatar.Root>
 );
diff --git a/packages/ui/src/design-system/summary-expander/summary-expander.component.tsx b/packages/ui/src/design-system/summary-expander/summary-expander.component.tsx
index ef7940766..07b61dd43 100644
--- a/packages/ui/src/design-system/summary-expander/summary-expander.component.tsx
+++ b/packages/ui/src/design-system/summary-expander/summary-expander.component.tsx
@@ -45,9 +45,10 @@ export const SummaryExpander = ({
           [cx.expanded]: open,
         })}
       >
-        <Text.Body.Large weight="$bold" data-testid="expander-title">
+        <Text.Body.Normal weight="$semibold" data-testid="expander-title">
           {title}
-        </Text.Body.Large>
+        </Text.Body.Normal>
+
         <Collapsible.Trigger asChild data-testid="expander-button">
           <Trigger open={open} disabled={disabled} {...props} />
         </Collapsible.Trigger>
diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx b/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx
index be27be119..f9d112013 100644
--- a/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx
+++ b/packages/ui/src/design-system/transaction-summary/transaction-summary-amount.component.tsx
@@ -46,19 +46,16 @@ export const Amount = ({
         <Cell>
           <Flex>
             <Text.Body.Normal
-              weight="$semibold"
+              weight="$medium"
               data-testid={makeTestId(testId, 'label')}
             >
               {label}
             </Text.Body.Normal>
             {tooltip !== undefined && (
-              <Box ml="$8" className={cx.tooltip}>
+              <Box ml="$8">
                 <Tooltip label={tooltip}>
-                  <div
-                    className={cx.tooltipText}
-                    data-testid={makeTestId(testId, 'tooltip-icon')}
-                  >
-                    <InfoIcon />
+                  <div data-testid={makeTestId(testId, 'tooltip-icon')}>
+                    <InfoIcon className={cx.tooltipIcon} />
                   </div>
                 </Tooltip>
               </Box>
@@ -67,23 +64,23 @@ export const Amount = ({
         </Cell>
         <Cell>
           <Flex flexDirection="column" alignItems="flex-end" h="$fill">
-            <Text.Body.Small
+            <Text.Body.Normal
               color={shouldHighlightPositiveAmount ? 'success' : 'primary'}
               weight="$medium"
               className={cx.text}
               data-testid={makeTestId(testId, 'amount')}
             >
               {amount}
-            </Text.Body.Small>
+            </Text.Body.Normal>
             {displayFiat && (
-              <Text.Body.Small
+              <Text.Body.Normal
                 className={cx.secondaryText}
                 color="secondary"
                 weight="$medium"
                 data-testid={makeTestId(testId, 'fiat')}
               >
                 {fiatPrice}
-              </Text.Body.Small>
+              </Text.Body.Normal>
             )}
           </Flex>
         </Cell>
diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary-metadata.component.tsx b/packages/ui/src/design-system/transaction-summary/transaction-summary-metadata.component.tsx
index 432e2a46a..fcf0158b4 100644
--- a/packages/ui/src/design-system/transaction-summary/transaction-summary-metadata.component.tsx
+++ b/packages/ui/src/design-system/transaction-summary/transaction-summary-metadata.component.tsx
@@ -23,12 +23,12 @@ export const Metadata = ({
   return (
     <Grid {...props} columns="$2">
       <Cell>
-        <Text.Body.Large
-          weight="$bold"
+        <Text.Body.Normal
+          weight="$medium"
           {...(testID != undefined && { 'data-testid': `${testID}-label` })}
         >
           {label}
-        </Text.Body.Large>
+        </Text.Body.Normal>
       </Cell>
       <Cell>
         <Flex justifyContent="flex-end" h="$fill">
diff --git a/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts b/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts
index 7e0edae8a..13ccd8e8f 100644
--- a/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts
+++ b/packages/ui/src/design-system/transaction-summary/transaction-summary.css.ts
@@ -8,17 +8,10 @@ export const secondaryText = style({
   wordBreak: 'break-all',
 });
 
-export const tooltip = style([
+export const tooltipIcon = style([
   sx({
-    color: '$transaction_summary_secondary_label_color',
-    width: '$24',
+    color: '$text_primary',
     height: '$24',
-    fontSize: '$25',
-  }),
-]);
-
-export const tooltipText = style([
-  sx({
-    display: 'flex',
+    width: '$24',
   }),
 ]);
diff --git a/packages/ui/src/design-tokens/colors.data.ts b/packages/ui/src/design-tokens/colors.data.ts
index 1ae714588..9019c0a0a 100644
--- a/packages/ui/src/design-tokens/colors.data.ts
+++ b/packages/ui/src/design-tokens/colors.data.ts
@@ -149,7 +149,6 @@ export const colors = {
   $transaction_summary_secondary_label_color: '',
 
   $dapp_transaction_summary_type_label_color: '',
-  $dapp_transaction_summary_label: '',
 
   $toast_bar_container_bgColor: '',
   $toast_bar_icon_container_bgColor: '',
diff --git a/packages/ui/src/design-tokens/theme/dark-theme.css.ts b/packages/ui/src/design-tokens/theme/dark-theme.css.ts
index 2781f124c..64b38a349 100644
--- a/packages/ui/src/design-tokens/theme/dark-theme.css.ts
+++ b/packages/ui/src/design-tokens/theme/dark-theme.css.ts
@@ -220,7 +220,6 @@ const colors: Colors = {
 
   $dapp_transaction_summary_type_label_color:
     darkColorScheme.$primary_accent_purple,
-  $dapp_transaction_summary_label: darkColorScheme.$primary_white,
 
   $toast_bar_container_bgColor: darkColorScheme.$primary_dark_grey,
   $toast_bar_icon_container_bgColor: darkColorScheme.$primary_grey,
diff --git a/packages/ui/src/design-tokens/theme/light-theme.css.ts b/packages/ui/src/design-tokens/theme/light-theme.css.ts
index 1ebd47a1f..29a59dd65 100644
--- a/packages/ui/src/design-tokens/theme/light-theme.css.ts
+++ b/packages/ui/src/design-tokens/theme/light-theme.css.ts
@@ -240,7 +240,6 @@ const colors: Colors = {
 
   $dapp_transaction_summary_type_label_color:
     lightColorScheme.$primary_accent_purple,
-  $dapp_transaction_summary_label: lightColorScheme.$primary_dark_grey,
 
   $toast_bar_container_bgColor: lightColorScheme.$primary_white,
   $toast_bar_icon_container_bgColor: lightColorScheme.$primary_light_grey,