diff --git a/ts/features/pn/components/LegacyMessageDetails.tsx b/ts/features/pn/components/LegacyMessageDetails.tsx
index 063aea1d982..600590dec80 100644
--- a/ts/features/pn/components/LegacyMessageDetails.tsx
+++ b/ts/features/pn/components/LegacyMessageDetails.tsx
@@ -41,7 +41,7 @@ import { MessageDetailsSection } from "./MessageDetailsSection";
 import { MessageTimeline } from "./MessageTimeline";
 import { MessageTimelineCTA } from "./MessageTimelineCTA";
 import { LegacyMessageF24 } from "./LegacyMessageF24";
-import { LegacyMessageFooter } from "./LegacyMessageFooter";
+import { MessageFooter } from "./MessageFooter";
 import { LegacyMessagePayments } from "./LegacyMessagePayments";
 import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
 
@@ -194,7 +194,7 @@ export const LegacyMessageDetails = ({
         />
       )}
 
-      <LegacyMessageFooter
+      <MessageFooter
         messageId={messageId}
         payments={payments}
         maxVisiblePaymentCount={maxVisiblePaymentCount}
diff --git a/ts/features/pn/components/MessageDetails.tsx b/ts/features/pn/components/MessageDetails.tsx
index e95f246c75e..f9c22d59408 100644
--- a/ts/features/pn/components/MessageDetails.tsx
+++ b/ts/features/pn/components/MessageDetails.tsx
@@ -22,8 +22,8 @@ import { MessageDetailsTagBox } from "../../messages/components/MessageDetail/Me
 import { MessageDetailsAttachments } from "../../messages/components/MessageDetail/MessageDetailsAttachments";
 import { UIMessageId } from "../../messages/types";
 import {
-  canShowMorePaymentsLink,
-  maxVisiblePaymentCountGenerator
+  maxVisiblePaymentCountGenerator,
+  shouldUseBottomSheetForPayments
 } from "../utils";
 import { MessageDetailsContent } from "./MessageDetailsContent";
 import { F24Section } from "./F24Section";
@@ -31,6 +31,7 @@ import { MessageBottomMenu } from "./MessageBottomMenu";
 import { MessagePayments } from "./MessagePayments";
 import { MessageInfo } from "./MessageInfo";
 import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
+import { MessageFooter } from "./MessageFooter";
 
 type MessageDetailsProps = {
   message: PNMessage;
@@ -121,7 +122,14 @@ export const MessageDetails = ({
         </ContentWrapper>
         <MessageBottomMenu serviceId={serviceId} />
       </ScrollView>
-      {canShowMorePaymentsLink(isCancelled, payments) && (
+      <MessageFooter
+        messageId={messageId}
+        payments={payments}
+        maxVisiblePaymentCount={maxVisiblePaymentCount}
+        isCancelled={isCancelled}
+        presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
+      />
+      {shouldUseBottomSheetForPayments(isCancelled, payments) && (
         <MessagePaymentBottomSheet
           messageId={messageId}
           payments={payments}
diff --git a/ts/features/pn/components/LegacyMessageFooter.tsx b/ts/features/pn/components/MessageFooter.tsx
similarity index 74%
rename from ts/features/pn/components/LegacyMessageFooter.tsx
rename to ts/features/pn/components/MessageFooter.tsx
index 87dae5d005a..64cd0610a6b 100644
--- a/ts/features/pn/components/LegacyMessageFooter.tsx
+++ b/ts/features/pn/components/MessageFooter.tsx
@@ -5,8 +5,9 @@ import {
   IOStyles,
   useIOToast
 } from "@pagopa/io-app-design-system";
-import I18n from "i18n-js";
 import { useDispatch } from "react-redux";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import I18n from "../../../i18n";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
 import { useIOSelector } from "../../../store/hooks";
 import { UIMessageId } from "../../messages/types";
@@ -16,6 +17,8 @@ import { getRptIdStringFromPayment } from "../utils/rptId";
 import { trackPNShowAllPayments } from "../analytics";
 import { initializeAndNavigateToWalletForPayment } from "../../messages/utils";
 import { paymentsButtonStateSelector } from "../store/reducers/payments";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
+import { shouldUseBottomSheetForPayments } from "../utils";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,7 +28,7 @@ const styles = StyleSheet.create({
   }
 });
 
-type LegacyMessageFooterProps = {
+type MessageFooterProps = {
   messageId: UIMessageId;
   payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
   maxVisiblePaymentCount: number;
@@ -33,13 +36,15 @@ type LegacyMessageFooterProps = {
   presentPaymentsBottomSheetRef: MutableRefObject<(() => void) | undefined>;
 };
 
-export const LegacyMessageFooter = ({
+export const MessageFooter = ({
   messageId,
   payments,
   maxVisiblePaymentCount,
   isCancelled,
   presentPaymentsBottomSheetRef
-}: LegacyMessageFooterProps) => {
+}: MessageFooterProps) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
   const buttonState = useIOSelector(state =>
     paymentsButtonStateSelector(
       state,
@@ -54,7 +59,10 @@ export const LegacyMessageFooter = ({
     canNavigateToPaymentFromMessageSelector(state)
   );
   const onFooterPressCallback = useCallback(() => {
-    if (payments?.length === 1) {
+    if (shouldUseBottomSheetForPayments(false, payments)) {
+      trackPNShowAllPayments();
+      presentPaymentsBottomSheetRef.current?.();
+    } else if (payments) {
       const firstPayment = payments[0];
       const paymentId = getRptIdStringFromPayment(firstPayment);
       initializeAndNavigateToWalletForPayment(
@@ -67,9 +75,6 @@ export const LegacyMessageFooter = ({
         true,
         () => toast.error(I18n.t("genericError"))
       );
-    } else {
-      trackPNShowAllPayments();
-      presentPaymentsBottomSheetRef.current?.();
     }
   }, [
     canNavigateToPayment,
@@ -83,7 +88,23 @@ export const LegacyMessageFooter = ({
     return null;
   }
   const isLoading = buttonState === "visibleLoading";
-  return (
+  return isDesignSystemEnabled ? (
+    <View
+      style={[
+        IOStyles.footer,
+        { paddingBottom: safeAreaInsets.bottom + IOStyles.footer.paddingBottom }
+      ]}
+    >
+      <ButtonSolid
+        disabled={isLoading}
+        label={I18n.t("wallet.continue")}
+        accessibilityLabel={I18n.t("wallet.continue")}
+        onPress={onFooterPressCallback}
+        fullWidth
+        loading={isLoading}
+      />
+    </View>
+  ) : (
     <View style={styles.container}>
       <View style={IOStyles.footer}>
         <ButtonSolid
diff --git a/ts/features/pn/components/MessagePayments.tsx b/ts/features/pn/components/MessagePayments.tsx
index 302401e8819..1f44d7f5feb 100644
--- a/ts/features/pn/components/MessagePayments.tsx
+++ b/ts/features/pn/components/MessagePayments.tsx
@@ -23,11 +23,12 @@ import PN_ROUTES from "../navigation/routes";
 import { MESSAGES_ROUTES } from "../../messages/navigation/routes";
 import { MessagePaymentItem } from "../../messages/components/MessageDetail/MessagePaymentItem";
 import { getRptIdStringFromPayment } from "../utils/rptId";
+import { canShowMorePaymentsLink } from "../utils";
 
 const styles = StyleSheet.create({
   morePaymentsSkeletonContainer: {
     flex: 1,
-    alignItems: "flex-start"
+    alignItems: "center"
   },
   morePaymentsLinkContainer: {
     alignSelf: "center"
@@ -154,8 +155,6 @@ export const MessagePayments = ({
     );
   }
 
-  const showMorePaymentsLink =
-    payments && payments.length > maxVisiblePaymentCount;
   const morePaymentsLabel = payments
     ? `${I18n.t("features.pn.details.paymentSection.morePayments")} (${
         payments.length
@@ -184,7 +183,7 @@ export const MessagePayments = ({
               />
             );
           })}
-          {showMorePaymentsLink && (
+          {canShowMorePaymentsLink(isCancelled, payments) && (
             <>
               <VSpacer size={32} />
               {paymentsButtonStatus === "visibleLoading" && (
diff --git a/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx b/ts/features/pn/components/__test__/MessageFooter.test.tsx
similarity index 95%
rename from ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx
rename to ts/features/pn/components/__test__/MessageFooter.test.tsx
index c69e9f3d332..81539a40c07 100644
--- a/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx
+++ b/ts/features/pn/components/__test__/MessageFooter.test.tsx
@@ -5,11 +5,11 @@ import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/per
 import { appReducer } from "../../../../store/reducers";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 import { UIMessageId } from "../../../messages/types";
-import { LegacyMessageFooter } from "../LegacyMessageFooter";
+import { MessageFooter } from "../MessageFooter";
 import * as standardPayments from "../../../messages/store/reducers/payments";
 import * as payments from "../../store/reducers/payments";
 
-describe("LegacyMessageFooter", () => {
+describe("MessageFooter", () => {
   beforeEach(() => {
     jest.resetAllMocks();
     jest.clearAllMocks();
@@ -64,7 +64,7 @@ const renderScreen = (
 
   return renderScreenWithNavigationStoreContext(
     () => (
-      <LegacyMessageFooter
+      <MessageFooter
         messageId={messageId}
         maxVisiblePaymentCount={maxVisiblePaymentCount}
         isCancelled={isCancelled}
diff --git a/ts/features/pn/components/__test__/__snapshots__/LegacyMessageFooter.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap
similarity index 73%
rename from ts/features/pn/components/__test__/__snapshots__/LegacyMessageFooter.test.tsx.snap
rename to ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap
index 6f407a6f8b1..becee716c1f 100644
--- a/ts/features/pn/components/__test__/__snapshots__/LegacyMessageFooter.test.tsx.snap
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LegacyMessageFooter should match snapshot for cancelled PN notification 1`] = `
+exports[`MessageFooter should match snapshot for cancelled PN notification 1`] = `
 <View
   style={
     Object {
@@ -331,7 +331,7 @@ exports[`LegacyMessageFooter should match snapshot for cancelled PN notification
 </View>
 `;
 
-exports[`LegacyMessageFooter should match snapshot for hidden button 1`] = `
+exports[`MessageFooter should match snapshot for hidden button 1`] = `
 <View
   style={
     Object {
@@ -662,7 +662,7 @@ exports[`LegacyMessageFooter should match snapshot for hidden button 1`] = `
 </View>
 `;
 
-exports[`LegacyMessageFooter should match snapshot for visibleEnabled button 1`] = `
+exports[`MessageFooter should match snapshot for visibleEnabled button 1`] = `
 <View
   style={
     Object {
@@ -983,15 +983,7 @@ exports[`LegacyMessageFooter should match snapshot for visibleEnabled button 1`]
                     >
                       <View
                         style={
-                          Object {
-                            "marginTop": -50,
-                            "overflow": "hidden",
-                            "paddingTop": 50,
-                          }
-                        }
-                      >
-                        <View
-                          style={
+                          Array [
                             Object {
                               "backgroundColor": "#FFFFFF",
                               "elevation": 20,
@@ -1005,115 +997,118 @@ exports[`LegacyMessageFooter should match snapshot for visibleEnabled button 1`]
                               },
                               "shadowOpacity": 0.5,
                               "shadowRadius": 37,
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Go to payment"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "busy": false,
+                              "disabled": false,
                             }
                           }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={Object {}}
                         >
                           <View
-                            accessibilityLabel="Go to payment"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              Object {
-                                "busy": false,
-                                "disabled": false,
-                              }
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 16,
+                                  "textAlignVertical": "center",
+                                },
+                                Object {
+                                  "overflow": "hidden",
+                                },
+                                false,
+                                Object {
+                                  "height": 40,
+                                },
+                                Object {
+                                  "backgroundColor": "#0073E6",
+                                },
+                                Object {
+                                  "backgroundColor": undefined,
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={Object {}}
                           >
                             <View
                               style={
                                 Array [
                                   Object {
                                     "alignItems": "center",
-                                    "borderRadius": 4,
-                                    "elevation": 0,
                                     "flexDirection": "row",
                                     "justifyContent": "center",
-                                    "paddingHorizontal": 16,
-                                    "textAlignVertical": "center",
-                                  },
-                                  Object {
-                                    "overflow": "hidden",
                                   },
                                   false,
-                                  Object {
-                                    "height": 40,
-                                  },
-                                  Object {
-                                    "backgroundColor": "#0073E6",
-                                  },
-                                  Object {
-                                    "backgroundColor": undefined,
-                                    "transform": Array [
-                                      Object {
-                                        "scale": undefined,
-                                      },
-                                    ],
-                                  },
                                 ]
                               }
                             >
-                              <View
+                              <Text
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                allowFontScaling={false}
+                                color="white"
+                                defaultColor="white"
+                                defaultWeight="Bold"
+                                ellipsizeMode="tail"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 16,
+                                  }
+                                }
+                                importantForAccessibility="no-hide-descendants"
+                                maxFontSizeMultiplier={1.3}
+                                numberOfLines={1}
                                 style={
                                   Array [
                                     Object {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "justifyContent": "center",
+                                      "alignSelf": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 16,
+                                    },
+                                    Object {
+                                      "color": "#FFFFFF",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
                                     },
-                                    false,
                                   ]
                                 }
+                                weight="Bold"
                               >
-                                <Text
-                                  accessibilityElementsHidden={true}
-                                  accessible={false}
-                                  allowFontScaling={false}
-                                  color="white"
-                                  defaultColor="white"
-                                  defaultWeight="Bold"
-                                  ellipsizeMode="tail"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 16,
-                                    }
-                                  }
-                                  importantForAccessibility="no-hide-descendants"
-                                  maxFontSizeMultiplier={1.3}
-                                  numberOfLines={1}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "alignSelf": "center",
-                                      },
-                                      Object {
-                                        "fontSize": 16,
-                                      },
-                                      Object {
-                                        "color": "#FFFFFF",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "700",
-                                      },
-                                    ]
-                                  }
-                                  weight="Bold"
-                                >
-                                  Go to payment
-                                </Text>
-                              </View>
+                                Go to payment
+                              </Text>
                             </View>
                           </View>
                         </View>
@@ -1131,7 +1126,7 @@ exports[`LegacyMessageFooter should match snapshot for visibleEnabled button 1`]
 </View>
 `;
 
-exports[`LegacyMessageFooter should match snapshot for visibleLoading button 1`] = `
+exports[`MessageFooter should match snapshot for visibleLoading button 1`] = `
 <View
   style={
     Object {
@@ -1452,15 +1447,7 @@ exports[`LegacyMessageFooter should match snapshot for visibleLoading button 1`]
                     >
                       <View
                         style={
-                          Object {
-                            "marginTop": -50,
-                            "overflow": "hidden",
-                            "paddingTop": 50,
-                          }
-                        }
-                      >
-                        <View
-                          style={
+                          Array [
                             Object {
                               "backgroundColor": "#FFFFFF",
                               "elevation": 20,
@@ -1474,165 +1461,184 @@ exports[`LegacyMessageFooter should match snapshot for visibleLoading button 1`]
                               },
                               "shadowOpacity": 0.5,
                               "shadowRadius": 37,
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Go to payment"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "busy": true,
+                              "disabled": true,
                             }
                           }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={Object {}}
                         >
                           <View
-                            accessibilityLabel="Go to payment"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              Object {
-                                "busy": true,
-                                "disabled": true,
-                              }
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 16,
+                                  "textAlignVertical": "center",
+                                },
+                                Object {
+                                  "overflow": "hidden",
+                                },
+                                false,
+                                Object {
+                                  "height": 40,
+                                },
+                                Object {
+                                  "backgroundColor": "#CCD4DC",
+                                },
+                                false,
+                              ]
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={Object {}}
                           >
                             <View
+                              exiting={[Function]}
                               style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "borderRadius": 4,
-                                    "elevation": 0,
-                                    "flexDirection": "row",
-                                    "justifyContent": "center",
-                                    "paddingHorizontal": 16,
-                                    "textAlignVertical": "center",
-                                  },
-                                  Object {
-                                    "overflow": "hidden",
-                                  },
-                                  false,
-                                  Object {
-                                    "height": 40,
-                                  },
-                                  Object {
-                                    "backgroundColor": "#CCD4DC",
-                                  },
-                                  false,
-                                ]
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                }
                               }
                             >
                               <View
-                                exiting={[Function]}
+                                accessibilityRole="progressbar"
+                                accessible={true}
+                                importantForAccessibility="no-hide-descendants"
                                 style={
                                   Object {
-                                    "alignItems": "center",
-                                    "flexDirection": "row",
-                                    "justifyContent": "center",
+                                    "height": 24,
+                                    "width": 24,
                                   }
                                 }
+                                testID="LoadingSpinnerTestID"
                               >
                                 <View
-                                  accessibilityRole="progressbar"
-                                  accessible={true}
-                                  importantForAccessibility="no-hide-descendants"
+                                  collapsable={false}
                                   style={
                                     Object {
-                                      "height": 24,
-                                      "width": 24,
+                                      "transform": Array [
+                                        Object {
+                                          "rotateZ": "0deg",
+                                        },
+                                      ],
                                     }
                                   }
-                                  testID="LoadingSpinnerTestID"
+                                  testID="LoadingSpinnerAnimatedTestID"
                                 >
-                                  <View
-                                    collapsable={false}
+                                  <RNSVGSvgView
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    fill="none"
+                                    focusable={false}
+                                    height={24}
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
                                     style={
-                                      Object {
-                                        "transform": Array [
-                                          Object {
-                                            "rotateZ": "0deg",
-                                          },
-                                        ],
-                                      }
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
                                     }
-                                    testID="LoadingSpinnerAnimatedTestID"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
                                   >
-                                    <RNSVGSvgView
-                                      align="xMidYMid"
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      fill="none"
-                                      focusable={false}
-                                      height={24}
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
-                                      style={
+                                    <RNSVGGroup
+                                      fill={null}
+                                      propList={
                                         Array [
-                                          Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
-                                          },
-                                          Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
-                                          },
+                                          "fill",
                                         ]
                                       }
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
+                                      <RNSVGDefs>
+                                        <RNSVGLinearGradient
+                                          gradient={
+                                            Array [
+                                              0,
+                                              16777215,
+                                              1,
+                                              -1,
+                                            ]
+                                          }
+                                          gradientTransform={null}
+                                          gradientUnits={0}
+                                          name="spinner-secondHalf"
+                                          x1="0%"
+                                          x2="100%"
+                                          y1="0%"
+                                          y2="0%"
+                                        />
+                                        <RNSVGLinearGradient
+                                          gradient={
+                                            Array [
+                                              0,
+                                              -1,
+                                              1,
+                                              -1,
+                                            ]
+                                          }
+                                          gradientTransform={null}
+                                          gradientUnits={0}
+                                          name="spinner-firstHalf"
+                                          x1="0%"
+                                          x2="100%"
+                                          y1="0%"
+                                          y2="0%"
+                                        />
+                                      </RNSVGDefs>
                                       <RNSVGGroup
-                                        fill={null}
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
                                         propList={
                                           Array [
-                                            "fill",
+                                            "strokeWidth",
                                           ]
                                         }
+                                        strokeWidth={3}
                                       >
-                                        <RNSVGDefs>
-                                          <RNSVGLinearGradient
-                                            gradient={
-                                              Array [
-                                                0,
-                                                16777215,
-                                                1,
-                                                -1,
-                                              ]
-                                            }
-                                            gradientTransform={null}
-                                            gradientUnits={0}
-                                            name="spinner-secondHalf"
-                                            x1="0%"
-                                            x2="100%"
-                                            y1="0%"
-                                            y2="0%"
-                                          />
-                                          <RNSVGLinearGradient
-                                            gradient={
-                                              Array [
-                                                0,
-                                                -1,
-                                                1,
-                                                -1,
-                                              ]
-                                            }
-                                            gradientTransform={null}
-                                            gradientUnits={0}
-                                            name="spinner-firstHalf"
-                                            x1="0%"
-                                            x2="100%"
-                                            y1="0%"
-                                            y2="0%"
-                                          />
-                                        </RNSVGDefs>
-                                        <RNSVGGroup
+                                        <RNSVGPath
+                                          d="M 1.5 12 A 10.5 10.5 0 0 1 22.5 12"
                                           fill={
                                             Object {
                                               "payload": 4278190080,
@@ -1641,77 +1647,61 @@ exports[`LegacyMessageFooter should match snapshot for visibleLoading button 1`]
                                           }
                                           propList={
                                             Array [
-                                              "strokeWidth",
+                                              "stroke",
                                             ]
                                           }
-                                          strokeWidth={3}
-                                        >
-                                          <RNSVGPath
-                                            d="M 1.5 12 A 10.5 10.5 0 0 1 22.5 12"
-                                            fill={
-                                              Object {
-                                                "payload": 4278190080,
-                                                "type": 0,
-                                              }
-                                            }
-                                            propList={
-                                              Array [
-                                                "stroke",
-                                              ]
-                                            }
-                                            stroke={
-                                              Object {
-                                                "brushRef": "spinner-secondHalf",
-                                                "type": 1,
-                                              }
-                                            }
-                                          />
-                                          <RNSVGPath
-                                            d="M 22.5 12 A 10.5 10.5 0 0 1 1.5 12"
-                                            fill={
-                                              Object {
-                                                "payload": 4278190080,
-                                                "type": 0,
-                                              }
-                                            }
-                                            propList={
-                                              Array [
-                                                "stroke",
-                                              ]
+                                          stroke={
+                                            Object {
+                                              "brushRef": "spinner-secondHalf",
+                                              "type": 1,
                                             }
-                                            stroke={
-                                              Object {
-                                                "brushRef": "spinner-firstHalf",
-                                                "type": 1,
-                                              }
+                                          }
+                                        />
+                                        <RNSVGPath
+                                          d="M 22.5 12 A 10.5 10.5 0 0 1 1.5 12"
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
                                             }
-                                          />
-                                          <RNSVGPath
-                                            d="M 1.5 12 A 10.5 10.5 0 0 1 1.5 11.25"
-                                            fill={
-                                              Object {
-                                                "payload": 4278190080,
-                                                "type": 0,
-                                              }
+                                          }
+                                          propList={
+                                            Array [
+                                              "stroke",
+                                            ]
+                                          }
+                                          stroke={
+                                            Object {
+                                              "brushRef": "spinner-firstHalf",
+                                              "type": 1,
                                             }
-                                            propList={
-                                              Array [
-                                                "stroke",
-                                                "strokeLinecap",
-                                              ]
+                                          }
+                                        />
+                                        <RNSVGPath
+                                          d="M 1.5 12 A 10.5 10.5 0 0 1 1.5 11.25"
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
                                             }
-                                            stroke={
-                                              Object {
-                                                "payload": 4294967295,
-                                                "type": 0,
-                                              }
+                                          }
+                                          propList={
+                                            Array [
+                                              "stroke",
+                                              "strokeLinecap",
+                                            ]
+                                          }
+                                          stroke={
+                                            Object {
+                                              "payload": 4294967295,
+                                              "type": 0,
                                             }
-                                            strokeLinecap={1}
-                                          />
-                                        </RNSVGGroup>
+                                          }
+                                          strokeLinecap={1}
+                                        />
                                       </RNSVGGroup>
-                                    </RNSVGSvgView>
-                                  </View>
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
                                 </View>
                               </View>
                             </View>
diff --git a/ts/features/pn/utils/__tests__/index.test.ts b/ts/features/pn/utils/__tests__/index.test.ts
index b0d4d13c190..cc37462914a 100644
--- a/ts/features/pn/utils/__tests__/index.test.ts
+++ b/ts/features/pn/utils/__tests__/index.test.ts
@@ -1,5 +1,9 @@
 import * as O from "fp-ts/lib/Option";
-import { canShowMorePaymentsLink, isPNOptInMessage } from "..";
+import {
+  canShowMorePaymentsLink,
+  isPNOptInMessage,
+  shouldUseBottomSheetForPayments
+} from "..";
 import { GlobalState } from "../../../../store/reducers/types";
 import { CTAS } from "../../../messages/types/MessageCTA";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
@@ -323,3 +327,64 @@ describe("canShowMorePaymentsLink", () => {
     expect(showMorePayments).toBe(true);
   });
 });
+
+describe("shouldUseBottomSheetForPayments", () => {
+  it("should return false, cancelled message, undefined payments", () => {
+    const showMorePayments = shouldUseBottomSheetForPayments(true, undefined);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, cancelled message, empty payments", () => {
+    const showMorePayments = shouldUseBottomSheetForPayments(true, []);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, cancelled message, one payment", () => {
+    const payments = [...Array(1).keys()].map(
+      _ => ({} as NotificationPaymentInfo)
+    );
+    const showMorePayments = shouldUseBottomSheetForPayments(true, payments);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, cancelled message, two payments", () => {
+    const payments = [...Array(2).keys()].map(
+      _ => ({} as NotificationPaymentInfo)
+    );
+    const showMorePayments = shouldUseBottomSheetForPayments(true, payments);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, cancelled message, more than two payments", () => {
+    const payments = [...Array(3).keys()].map(
+      _ => ({} as NotificationPaymentInfo)
+    );
+    const showMorePayments = shouldUseBottomSheetForPayments(true, payments);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, not cancelled message, undefined payments", () => {
+    const showMorePayments = shouldUseBottomSheetForPayments(false, undefined);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, not cancelled message, empty payments", () => {
+    const showMorePayments = shouldUseBottomSheetForPayments(false, []);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return false, not cancelled message, one payment", () => {
+    const payments = [...Array(1).keys()].map(
+      _ => ({} as NotificationPaymentInfo)
+    );
+    const showMorePayments = shouldUseBottomSheetForPayments(false, payments);
+    expect(showMorePayments).toBe(false);
+  });
+  it("should return true, not cancelled message, two payments", () => {
+    const payments = [...Array(2).keys()].map(
+      _ => ({} as NotificationPaymentInfo)
+    );
+    const showMorePayments = shouldUseBottomSheetForPayments(false, payments);
+    expect(showMorePayments).toBe(true);
+  });
+  it("should return true, not cancelled message, more than two payments", () => {
+    const payments = [...Array(3).keys()].map(
+      _ => ({} as NotificationPaymentInfo)
+    );
+    const showMorePayments = shouldUseBottomSheetForPayments(false, payments);
+    expect(showMorePayments).toBe(true);
+  });
+});
diff --git a/ts/features/pn/utils/index.ts b/ts/features/pn/utils/index.ts
index 544f7c68ec3..51a1bbcf3bc 100644
--- a/ts/features/pn/utils/index.ts
+++ b/ts/features/pn/utils/index.ts
@@ -123,3 +123,9 @@ export const canShowMorePaymentsLink = (
   !isCancelled &&
   !!payments &&
   payments.length > maxVisiblePaymentCountGenerator();
+
+export const shouldUseBottomSheetForPayments = (
+  isCancelled: boolean,
+  payments?: ReadonlyArray<NotificationPaymentInfo>
+): payments is ReadonlyArray<NotificationPaymentInfo> =>
+  !isCancelled && (payments?.length ?? 0) > 1;