diff --git a/app/components/Views/confirmations/components/UI/expandable-section/index.ts b/app/components/Views/confirmations/components/UI/expandable-section/index.ts
deleted file mode 100644
index 74c172f26c87..000000000000
--- a/app/components/Views/confirmations/components/UI/expandable-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './expandable-section';
diff --git a/app/components/Views/confirmations/components/UI/expandable-section/expandable-section.styles.ts b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts
similarity index 94%
rename from app/components/Views/confirmations/components/UI/expandable-section/expandable-section.styles.ts
rename to app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts
index 2101e64b1104..0c007434d71a 100644
--- a/app/components/Views/confirmations/components/UI/expandable-section/expandable-section.styles.ts
+++ b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts
@@ -38,10 +38,6 @@ const styleSheet = (params: { theme: Theme, vars: { isCompact: boolean | undefin
       width: '90%',
       textAlign: 'center',
     },
-    expandIcon: {
-      position: 'absolute',
-      right: 16,
-    },
   });
 };
 
diff --git a/app/components/Views/confirmations/components/UI/expandable-section/expandable-section.test.tsx b/app/components/Views/confirmations/components/UI/expandable/expandable.test.tsx
similarity index 87%
rename from app/components/Views/confirmations/components/UI/expandable-section/expandable-section.test.tsx
rename to app/components/Views/confirmations/components/UI/expandable/expandable.test.tsx
index 886869b3e1aa..17e5434d11a2 100644
--- a/app/components/Views/confirmations/components/UI/expandable-section/expandable-section.test.tsx
+++ b/app/components/Views/confirmations/components/UI/expandable/expandable.test.tsx
@@ -4,12 +4,12 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import InfoSection from '../info-row/info-section';
 import InfoRow from '../info-row/info-row';
-import ExpandableSection from './expandable-section';
+import Expandable from './expandable';
 
-describe('ExpandableSection', () => {
-  it('should render correctly for simple ExpandableSection', async () => {
+describe('Expandable', () => {
+  it('should render correctly for simple Expandable', async () => {
     const { getByText } = render(
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <View>
             <Text>Open</Text>
@@ -28,7 +28,7 @@ describe('ExpandableSection', () => {
 
   it('should display default content', async () => {
     const { getByText } = render(
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <View>
             <Text>Open</Text>
@@ -47,7 +47,7 @@ describe('ExpandableSection', () => {
 
   it('should open modal when right icon is pressed', async () => {
     const { getByTestId, getByText } = render(
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <View>
             <Text>Open</Text>
diff --git a/app/components/Views/confirmations/components/UI/expandable-section/expandable-section.tsx b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx
similarity index 73%
rename from app/components/Views/confirmations/components/UI/expandable-section/expandable-section.tsx
rename to app/components/Views/confirmations/components/UI/expandable/expandable.tsx
index f422fc239379..2de11a6d0316 100644
--- a/app/components/Views/confirmations/components/UI/expandable-section/expandable-section.tsx
+++ b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx
@@ -4,21 +4,19 @@ import { TouchableOpacity, View } from 'react-native';
 import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../../../../component-library/components/Buttons/ButtonIcon';
-import Icon, {
+import {
   IconColor,
   IconName,
-  IconSize,
 } from '../../../../../../component-library/components/Icons/Icon';
 import Text from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import BottomModal from '../bottom-modal';
-import styleSheet from './expandable-section.styles';
+import styleSheet from './expandable.styles';
 
-interface ExpandableSectionProps {
+interface ExpandableProps {
   collapsedContent: ReactNode;
   expandedContent: ReactNode;
   expandedContentTitle: string;
-  iconVerticalPosition?: IconVerticalPosition;
   collapseButtonTestID?: string;
   testID?: string;
   isCompact?: boolean;
@@ -28,21 +26,17 @@ export enum IconVerticalPosition {
   Top = 'top',
 }
 
-const ExpandableSection = ({
+const Expandable = ({
   collapsedContent,
   expandedContent,
   expandedContentTitle,
-  iconVerticalPosition,
   collapseButtonTestID,
   testID,
   isCompact,
-}: ExpandableSectionProps) => {
+}: ExpandableProps) => {
   const { styles } = useStyles(styleSheet, { isCompact });
   const [expanded, setExpanded] = useState(false);
 
-  const iconStyle =
-    iconVerticalPosition === IconVerticalPosition.Top ? { top: 20 } : {};
-
   return (
     <>
       <TouchableOpacity
@@ -53,18 +47,7 @@ const ExpandableSection = ({
         activeOpacity={1}
         testID={testID ?? 'expandableSection'}
       >
-        <View style={styles.container}>
-          {collapsedContent}
-          <Icon
-            color={IconColor.Muted}
-            size={IconSize.Sm}
-            name={IconName.ArrowRight}
-            style={{
-              ...styles.expandIcon,
-              ...iconStyle,
-            }}
-          />
-        </View>
+        {collapsedContent}
       </TouchableOpacity>
       {expanded && (
         <BottomModal onClose={() => setExpanded(false)}>
@@ -89,4 +72,4 @@ const ExpandableSection = ({
   );
 };
 
-export default ExpandableSection;
+export default Expandable;
diff --git a/app/components/Views/confirmations/components/UI/expandable/index.ts b/app/components/Views/confirmations/components/UI/expandable/index.ts
new file mode 100644
index 000000000000..ba57da2b9caa
--- /dev/null
+++ b/app/components/Views/confirmations/components/UI/expandable/index.ts
@@ -0,0 +1 @@
+export { default } from './expandable';
diff --git a/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.styles.ts b/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.styles.ts
new file mode 100644
index 000000000000..b7d89ee1cf7b
--- /dev/null
+++ b/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.styles.ts
@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () => StyleSheet.create({
+    infoRowOverride: {
+      paddingBottom: 4,
+      paddingHorizontal: 8,
+    },
+  });
+
+export default styleSheet;
diff --git a/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.tsx b/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.tsx
index a3a5e07b3369..994352f03576 100755
--- a/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.tsx
+++ b/app/components/Views/confirmations/components/UI/info-row/alert-row/alert-row.tsx
@@ -4,7 +4,9 @@ import { useAlerts } from '../../../../context/alert-system-context';
 import { useConfirmationAlertMetrics } from '../../../../hooks/metrics/useConfirmationAlertMetrics';
 import { Severity } from '../../../../types/alerts';
 import { TextColor } from '../../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../../../component-library/hooks';
 import InfoRow, { InfoRowProps } from '../info-row';
+import styleSheet from './alert-row.styles';
 
 function getAlertTextColors(
   severity?: Severity,
@@ -29,6 +31,7 @@ const AlertRow = ({ alertField, isShownWithAlertsOnly, ...props }: AlertRowProps
   const { fieldAlerts, showAlertModal, setAlertKey } = useAlerts();
   const { trackInlineAlertClicked } = useConfirmationAlertMetrics();
   const alertSelected = fieldAlerts.find((a) => a.field === alertField);
+  const { styles } = useStyles(styleSheet, {});
 
   const handleInlineAlertClick = () => {
     if(!alertSelected) return;
@@ -53,7 +56,13 @@ const AlertRow = ({ alertField, isShownWithAlertsOnly, ...props }: AlertRowProps
     />
   ) : null;
 
-  return <InfoRow {...alertRowProps} labelChildren={inlineAlert} />;
+  return (
+    <InfoRow
+      {...alertRowProps}
+      style={styles.infoRowOverride}
+      labelChildren={inlineAlert}
+    />
+  );
 };
 
 export default AlertRow;
diff --git a/app/components/Views/confirmations/components/UI/info-row/info-row.tsx b/app/components/Views/confirmations/components/UI/info-row/info-row.tsx
index d17393c75653..60c793c40fc1 100644
--- a/app/components/Views/confirmations/components/UI/info-row/info-row.tsx
+++ b/app/components/Views/confirmations/components/UI/info-row/info-row.tsx
@@ -1,9 +1,13 @@
 import React, { ReactNode } from 'react';
 import { View } from 'react-native';
-import { IconColor } from '../../../../../../component-library/components/Icons/Icon';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../../component-library/components/Icons/Icon';
 import Text, {
   TextColor,
-  TextVariant
+  TextVariant,
 } from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import Tooltip from '../Tooltip/Tooltip';
@@ -21,6 +25,11 @@ export interface InfoRowProps {
   variant?: TextColor;
   copyText?: string;
   valueOnNewLine?: boolean;
+  withIcon?: {
+    color: IconColor;
+    size: IconSize;
+    name: IconName;
+  };
 }
 
 const InfoRow = ({
@@ -34,6 +43,7 @@ const InfoRow = ({
   variant = TextColor.Default,
   copyText,
   valueOnNewLine = false,
+  withIcon,
 }: InfoRowProps) => {
   const { styles } = useStyles(styleSheet, {});
 
@@ -65,6 +75,13 @@ const InfoRow = ({
             color={IconColor.Muted}
           />
         )}
+        {withIcon && (
+          <Icon
+            color={withIcon.color}
+            size={withIcon.size}
+            name={withIcon.name}
+          />
+        )}
       </View>
       {valueOnNewLine ? (
         <View style={styles.valueOnNewLineContainer}>
diff --git a/app/components/Views/confirmations/components/info/transfer/transfer.test.tsx b/app/components/Views/confirmations/components/info/transfer/transfer.test.tsx
index 6cf68071e76a..7b454141376b 100644
--- a/app/components/Views/confirmations/components/info/transfer/transfer.test.tsx
+++ b/app/components/Views/confirmations/components/info/transfer/transfer.test.tsx
@@ -19,6 +19,12 @@ jest.mock('../../../../../../core/Engine', () => ({
     TokenListController: {
       fetchTokenList: jest.fn(),
     },
+    TransactionController: {
+      updateTransaction: jest.fn(),
+      getNonceLock: jest
+        .fn()
+        .mockResolvedValue({ nextNonce: 2, releaseLock: jest.fn() }),
+    },
   },
 }));
 
diff --git a/app/components/Views/confirmations/components/info/transfer/transfer.tsx b/app/components/Views/confirmations/components/info/transfer/transfer.tsx
index 5f9b722f6d05..4584a0337666 100644
--- a/app/components/Views/confirmations/components/info/transfer/transfer.tsx
+++ b/app/components/Views/confirmations/components/info/transfer/transfer.tsx
@@ -9,6 +9,7 @@ import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTr
 import useNavbar from '../../../hooks/ui/useNavbar';
 import FromTo from '../../rows/transactions/from-to';
 import GasFeesDetails from '../../rows/transactions/gas-fee-details';
+import AdvancedDetailsRow from '../../rows/transactions/advanced-details-row/advanced-details-row';
 import TokenHero from '../../rows/transactions/token-hero';
 import styleSheet from './transfer.styles';
 
@@ -33,6 +34,7 @@ const Transfer = () => {
         />
       </View>
       <GasFeesDetails />
+      <AdvancedDetailsRow />
     </View>
   );
 };
diff --git a/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.styles.ts b/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.styles.ts
index 4b920b9a6cee..a5c163794aeb 100644
--- a/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.styles.ts
+++ b/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.styles.ts
@@ -13,8 +13,14 @@ const styleSheet = (params: {
   } = params;
 
   return StyleSheet.create({
-    container: {
-      display: 'flex',
+    container:{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 8,
+      paddingBottom: 4,
+    },
+    accountContainer: {
+      flex: 1,
       flexDirection: 'row',
     },
     badgeWrapper: {
@@ -22,7 +28,6 @@ const styleSheet = (params: {
       alignSelf: 'center',
     },
     accountInfo: {
-      display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
       width: '100%',
diff --git a/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.tsx b/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.tsx
index 7847665d5d68..6241cc68d45c 100644
--- a/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.tsx
+++ b/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-collapsed/account-network-info-collapsed.tsx
@@ -20,6 +20,12 @@ import TagBase, {
 import { getLabelTextByAddress } from '../../../../../../../util/address';
 import { useStyles } from '../../../../../../../component-library/hooks';
 import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';
+import InfoSection from '../../../UI/info-row/info-section';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../../../component-library/components/Icons/Icon';
 import useAccountInfo from '../../../../hooks/useAccountInfo';
 import useNetworkInfo from '../../../../hooks/useNetworkInfo';
 import { useSignatureRequest } from '../../../../hooks/signatures/useSignatureRequest';
@@ -53,50 +59,59 @@ const AccountNetworkInfoCollapsed = () => {
   const { networkName, networkImage } = useNetworkInfo(chainId);
 
   return (
-    <View style={styles.container}>
-      <BadgeWrapper
-        badgePosition={BadgePosition.BottomRight}
-        badgeElement={
-          <Badge
-            variant={BadgeVariant.Network}
-            name={networkName}
-            imageSource={networkImage}
-          />
-        }
-        style={styles.badgeWrapper}
-      >
-        <Avatar
-          variant={AvatarVariant.Account}
-          type={
-            useBlockieIcon
-              ? AvatarAccountType.Blockies
-              : AvatarAccountType.JazzIcon
-          }
-          accountAddress={fromAddress}
-        />
-      </BadgeWrapper>
-      <View>
-        <View style={styles.accountInfo}>
-          <Text
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            style={styles.accountName}
+    <InfoSection>
+      <View style={styles.container}>
+        <View style={styles.accountContainer}>
+          <BadgeWrapper
+            badgePosition={BadgePosition.BottomRight}
+            badgeElement={
+              <Badge
+                variant={BadgeVariant.Network}
+                name={networkName}
+                imageSource={networkImage}
+              />
+            }
+            style={styles.badgeWrapper}
           >
-            {accountName}
-          </Text>
-          {accountLabel && (
-            <TagBase
-              style={styles.accountLabel}
-              severity={TagSeverity.Neutral}
-              shape={TagShape.Rectangle}
-            >
-              {accountLabel}
-            </TagBase>
-          )}
+            <Avatar
+              variant={AvatarVariant.Account}
+              type={
+                useBlockieIcon
+                  ? AvatarAccountType.Blockies
+                  : AvatarAccountType.JazzIcon
+              }
+              accountAddress={fromAddress}
+            />
+          </BadgeWrapper>
+          <View>
+            <View style={styles.accountInfo}>
+              <Text
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={styles.accountName}
+              >
+                {accountName}
+              </Text>
+              {accountLabel && (
+                <TagBase
+                  style={styles.accountLabel}
+                  severity={TagSeverity.Neutral}
+                  shape={TagShape.Rectangle}
+                >
+                  {accountLabel}
+                </TagBase>
+              )}
+            </View>
+            <Text style={styles.networkName}>{networkName}</Text>
+          </View>
         </View>
-        <Text style={styles.networkName}>{networkName}</Text>
+        <Icon
+          color={IconColor.Muted}
+          size={IconSize.Sm}
+          name={IconName.ArrowRight}
+        />
       </View>
-    </View>
+    </InfoSection>
   );
 };
 
diff --git a/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-row.tsx b/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-row.tsx
index cf811534107a..83370a715b9a 100644
--- a/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-row.tsx
+++ b/app/components/Views/confirmations/components/rows/account-network-info-row/account-network-info-row.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import { strings } from '../../../../../../../locales/i18n';
 import useApprovalRequest from '../../../hooks/useApprovalRequest';
-import ExpandableSection from '../../UI/expandable-section';
+import Expandable from '../../UI/expandable';
 import AccountNetworkInfoCollapsed from './account-network-info-collapsed';
 import AccountNetworkInfoExpanded from './account-network-info-expanded';
 
@@ -15,7 +15,7 @@ const AccountNetworkInfo = () => {
   }
 
   return (
-    <ExpandableSection
+    <Expandable
       collapsedContent={<AccountNetworkInfoCollapsed />}
       expandedContent={<AccountNetworkInfoExpanded />}
       expandedContentTitle={strings('confirm.details')}
diff --git a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.styles.ts b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.styles.ts
index 1c5460620289..fe7b4198881f 100644
--- a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.styles.ts
+++ b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.styles.ts
@@ -5,13 +5,7 @@ const styleSheet = () => StyleSheet.create({
         textDecorationLine: 'underline',
     },
     infoRowOverride: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      flexWrap: 'wrap',
-      paddingBottom: 0,
-      paddingTop: 8,
+      paddingBottom: 4,
       paddingHorizontal: 8,
     },
   });
diff --git a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.test.tsx b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.test.tsx
index 96c8cb27e58a..9082121e1134 100644
--- a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.test.tsx
+++ b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.test.tsx
@@ -14,7 +14,7 @@ jest.mock('../../../../../../UI/Name', () => ({
 }));
 
 jest.mock('../../../../legacy/SendFlow/components/CustomNonceModal', () => 'CustomNonceModal');
-jest.mock('../../../UI/expandable-section', () => 'ExpandableSection');
+jest.mock('../../../UI/expandable', () => 'Expandable');
 jest.mock('../../../../../../../component-library/components/Texts/Text', () => ({
   TextColor: { Primary: 'primary' },
   TextVariant: { BodyMD: 'bodyMD' },
diff --git a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.tsx b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.tsx
index 582da69a02b0..e273a7721597 100644
--- a/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.tsx
+++ b/app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.tsx
@@ -2,14 +2,22 @@ import React from 'react';
 import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import { strings } from '../../../../../../../../locales/i18n';
 import Text from '../../../../../../../component-library/components/Texts/Text/Text';
-import { TextColor, TextVariant } from '../../../../../../../component-library/components/Texts/Text/Text.types';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../../../../../component-library/components/Texts/Text/Text.types';
 import { useEditNonce } from '../../../../../../hooks/useEditNonce';
 import { useStyles } from '../../../../../../hooks/useStyles';
 import Name from '../../../../../../UI/Name';
+import {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../../../component-library/components/Icons/Icon';
 import { NameType } from '../../../../../../UI/Name/Name.types';
 import { useTransactionMetadataRequest } from '../../../../hooks/transactions/useTransactionMetadataRequest';
 import CustomNonceModal from '../../../../legacy/SendFlow/components/CustomNonceModal';
-import ExpandableSection from '../../../UI/expandable-section';
+import Expandable from '../../../UI/expandable';
 import InfoRow from '../../../UI/info-row';
 import InfoSection from '../../../UI/info-row/info-section';
 import styleSheet from './advanced-details-row.styles';
@@ -31,12 +39,17 @@ const AdvancedDetailsRow = () => {
 
   return (
     <>
-      <ExpandableSection
+      <Expandable
         collapsedContent={
           <InfoSection>
             <InfoRow
               label={strings('stake.advanced_details')}
               style={styles.infoRowOverride}
+              withIcon={{
+                color: IconColor.Muted,
+                size: IconSize.Sm,
+                name: IconName.ArrowRight,
+              }}
             />
           </InfoSection>
         }
@@ -52,7 +65,7 @@ const AdvancedDetailsRow = () => {
               </InfoRow>
             </InfoSection>
             <InfoSection>
-              <InfoRow label={strings('transaction.custom_nonce')} tooltip={strings('transaction.custom_nonce_tooltip')}>
+            <InfoRow label={strings('transaction.custom_nonce')} tooltip={strings('transaction.custom_nonce_tooltip')}>
                 <Text
                   variant={TextVariant.BodyMD}
                   color={TextColor.Primary}
diff --git a/app/components/Views/confirmations/components/signature-message-section/signature-message-section.styles.ts b/app/components/Views/confirmations/components/signature-message-section/signature-message-section.styles.ts
index cedf04d7ad4d..d4d31266540e 100644
--- a/app/components/Views/confirmations/components/signature-message-section/signature-message-section.styles.ts
+++ b/app/components/Views/confirmations/components/signature-message-section/signature-message-section.styles.ts
@@ -8,8 +8,13 @@ const styleSheet = (params: { theme: Theme }) => {
 
   return StyleSheet.create({
     container: {
-      display: 'flex',
-      width: '100%',
+      position: 'relative',
+      paddingHorizontal: 8,
+    },
+    icon: {
+      position: 'absolute',
+      top: 4,
+      right: 8,
     },
     message: {
       marginTop: 8,
diff --git a/app/components/Views/confirmations/components/signature-message-section/signature-message-section.tsx b/app/components/Views/confirmations/components/signature-message-section/signature-message-section.tsx
index d8a4f6eb5eea..e74efa6c0b46 100644
--- a/app/components/Views/confirmations/components/signature-message-section/signature-message-section.tsx
+++ b/app/components/Views/confirmations/components/signature-message-section/signature-message-section.tsx
@@ -3,12 +3,17 @@ import { ScrollView, TouchableOpacity, View } from 'react-native';
 
 import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import { strings } from '../../../../../../locales/i18n';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../component-library/components/Icons/Icon';
 import Text from '../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../component-library/hooks';
 import CopyButton from '../UI/copy-button';
-import ExpandableSection from '../UI/expandable-section';
-import { IconVerticalPosition } from '../UI/expandable-section/expandable-section';
+import Expandable from '../UI/expandable';
 import styleSheet from './signature-message-section.styles';
+import InfoSection from '../UI/info-row/info-section';
 
 interface SignatureMessageSectionProps {
   messageCollapsed?: ReactNode | string;
@@ -26,25 +31,37 @@ const SignatureMessageSection = ({
   const { styles } = useStyles(styleSheet, {});
 
   return (
-    <ExpandableSection
+    <Expandable
       collapsedContent={
-        <View style={styles.container}>
-          <Text style={styles.title}>{strings('confirm.message')}</Text>
-          {messageCollapsed && (
-            <View style={styles.message}>
-              {typeof messageCollapsed === 'string' ? (
-                <Text
-                  style={styles.description}
-                  numberOfLines={collapsedSectionAllowMultiline ? undefined : 1}
-                >
-                  {messageCollapsed}
-                </Text>
-              ) : (
-                messageCollapsed
+        <InfoSection>
+          <View style={styles.container}>
+            <View>
+              <Text style={styles.title}>{strings('confirm.message')}</Text>
+              {messageCollapsed && (
+                <View style={styles.message}>
+                  {typeof messageCollapsed === 'string' ? (
+                    <Text
+                      style={styles.description}
+                      numberOfLines={
+                        collapsedSectionAllowMultiline ? undefined : 1
+                      }
+                    >
+                      {messageCollapsed}
+                    </Text>
+                  ) : (
+                    messageCollapsed
+                  )}
+                </View>
               )}
             </View>
-          )}
-        </View>
+            <Icon
+              style={styles.icon}
+              color={IconColor.Muted}
+              size={IconSize.Sm}
+              name={IconName.ArrowRight}
+            />
+          </View>
+        </InfoSection>
       }
       expandedContent={
         <View style={styles.messageContainer}>
@@ -59,7 +76,6 @@ const SignatureMessageSection = ({
         </View>
       }
       expandedContentTitle={strings('confirm.message')}
-      iconVerticalPosition={IconVerticalPosition.Top}
       testID={ConfirmationPageSectionsSelectorIDs.MESSAGE_SECTION}
     />
   );